🎨 CSS Gradient Generator
Build beautiful CSS gradients visually. Pick gradient type, adjust color stops and position, set direction — then copy the ready-to-use CSS. Linear, radial, and conic gradients supported.
Free CSS Gradient Generator — Build Linear, Radial, and Conic Gradients
CSS gradients let you display smooth transitions between colors without any images. Supported in all modern browsers, they're used for hero backgrounds, button styles, card overlays, text gradients, and decorative elements. This tool generates the exact CSS syntax you need.
CSS Gradient Syntax
linear-gradient(135deg, #7c3aed, #60a5fa) creates a diagonal purple-to-blue gradient. You can add more stops: linear-gradient(to right, #7c3aed 0%, #a78bfa 50%, #60a5fa 100%). Use radial-gradient for circular effects and conic-gradient for pie charts and color wheels.
Gradient for Text
To apply a gradient to text: set background: linear-gradient(...), then -webkit-background-clip: text; background-clip: text; color: transparent;. This is the same technique used on this site's hero headline.