150+ CSS Gradient Examples

Color Swatch

This is a dynamic radial menu built purely with HTML/CSS, where elements deploy on hover using the CSS transform: rotate() technique and smooth transitions, controlled by SASS variables. It showcases current techniques for complex hover animations, cross-browser compatibility via vendor prefixes, and precise interactivity control using pointer-events: initial.

Recipe Card

An interactive recipe detail modal technically implemented via JavaScript class toggling to trigger a complex, two-stage CSS transition - this creates a sliding panel effect; the demo uses gradients for the background, animates inner details, includes a zoom effect on the image on hover, and rotates the toggle icon using transform: rotate().

See the Pen Recipe Card.