360+ CSS Custom Property Examples (Page 13)

The button group uses CSS custom properties for a cohesive color scheme, featuring a standard hover background swap for the middle button, while the end buttons implement a complex directional background wipe effect.

The button features a complex, non-linear hover effect powered by a cubic-bezier transition curve and CSS transform: translate3d applied to the inner .mask element, creating a sweeping diagonal light wipe effect.

An animated rainbow border with a neon glow, created using @property, repeating-conic-gradient, and SVG filters. The @keyframes CSS animation continuously changes the --a CSS variable, which controls the angle of the conic-gradient, creating a rotating rainbow effect.

A performant typewriter effect where the text overlay and cursor are combined within the ::after pseudo-element, and the stepped reveal is achieved using the animation: typing X steps(N) forwards property.

High-performance 3D text animation where each character is independently controlled using transform: rotateX/translateY. The “running wave” effect is achieved via dynamic animation delay calculated using CSS variables per character.

Striking hero image and heading reveal animation, controlled by CSS Custom Properties for timings and a custom easing function, delivering a smooth and precise UX.