CSS Gradient Generator
Build beautiful linear, radial and conic gradients with unlimited colour stops and full angle control. Watch the live preview, then copy ready-to-paste CSS and Tailwind classes.
Colour stops
0%
100%
/* CSS */
background: linear-gradient(135deg, #7c4dff 0%, #ff5d8f 100%);<!-- Tailwind -->
bg-gradient-to-b from-[#7c4dff] to-[#ff5d8f]How CSS gradients work
A CSS gradient is an image generated by the browser from two or more colour stops. Alinear-gradient()runs along an angle, a radial-gradient() radiates from a point, and aconic-gradient() sweeps around one. The generator above writes the exact syntax for you and the matching Tailwind utility (bg-gradient-to-r from-… to-…).
Want full components? Browse the free glassmorphism collection — gradients pair perfectly with frosted glass panels.