Imperator Design
The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 5

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform
2 / 5

3D Flip Card with CSS

A responsive 3D card that flips on hover, revealing its back face with a smooth, spring-like animation, using pure CSS perspective and transform properties.

animationcsshovercard3dtransform
3 / 5

CSS Holo Card Shimmer Effect

A credit card-like element with an iridescent, oil-slick finish that appears to shimmer and reflect light as it's hovered, creating a captivating holographic effect purely with CSS gradients and transforms.

animationcssgradientshovercard3d
4 / 5

Spinning Conic Gradient Border

A square card features a mesmerizing, glowing border that slowly rotates through a vibrant rainbow of colors, powered entirely by a single CSS conic-gradient and animation.

animationcssgradientconic-gradientcardborder
5 / 5

Premium Pricing Card Details

This demo illustrates how subtle design changes like increased padding, clear typographic hierarchy, soft shadows, and a strong accent color can transform a basic pricing card into a premium-looking UI component.

csslayoutui/uxtypographycardshadow