6XC

CSS Gradient Generator

Design linear, radial and conic CSS gradients with live preview and copy the code.

835 views

CSS Gradients

A gradient is a smooth blend between colors, written as linear-gradient(angle, color1, color2), radial-gradient(...) or conic-gradient(...). Pick the type, angle and up to three colors — the preview and the copy-ready CSS update instantly. Gradients are rendered by the browser, so they cost no image download and stay razor sharp at any size.

Frequently Asked Questions

What does the angle mean in a linear gradient?

0° points up, 90° right, 180° down — the angle is the direction the gradient travels toward. 135° gives the popular top-left to bottom-right diagonal.

When should I use radial or conic?

Radial blends outward from the center — good for spotlights and vignettes. Conic sweeps around the center like a color wheel — good for pie charts and rainbow rings.

Similar Tools

CSS Box Shadow Generator Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview. Generate CSS Border Radius Generator Round each corner individually or all at once, in px or %, with live preview and copyable CSS. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate CSS Border Generator Design a border visually — width, style (solid, dashed, dotted, double…), color and radius — with live preview. Generate