CSS Gradient Generator
Build CSS gradients visually. Linear, radial, or conic; add color stops at specific positions; control the angle and gradient direction.
What you'll use this for
Gradients add visual depth and brand identity to backgrounds, buttons, and decorative panels — without any extra HTTP requests.
Hero backgrounds
Anchor a landing page with a smooth multi-color background — works as a full-page background-image.
Button styling
Replace flat fills with subtle gradients for a more dimensional CTA.
Brand identity
Reproduce a signature brand gradient across UI, social previews, and marketing assets.
Data visualization
Use gradient fills for area charts, progress meters, and heatmap legends.
How to build a CSS gradient
Pick a type
Linear flows in one direction; radial emanates from a point; conic sweeps around a center like a clock hand.
Set the angle
For linear and conic only. 0deg points up, 90deg right, 180deg down. Try 135deg for a classic diagonal.
Add stops
Each stop is a color plus a position (0–100%). Two stops make a simple fade; three or more let you craft custom palettes.
Copy the CSS
The generated background shorthand can drop into any element directly.
Frequently asked questions
Yes. The generated CSS is valid and can be pasted directly into a stylesheet, style attribute, or CSS-in-JS string.
Linear and radial gradients are supported in every evergreen browser. conic-gradient is supported in modern browsers (Chrome 69+, Safari 12.1+, Firefox 83+).
Yes. No signup, no limits, no ads.
Yes — separate them with commas in background-image. The first paints on top. Combine a radial highlight over a linear base for a glossy finish.
CSS gradient angles use the convention "the direction the gradient flows toward" — 0deg is up. CSS transform: rotate() uses screen rotation (0deg = no change, positive = clockwise from horizontal).
About CSS gradients
CSS gradients are images generated from a function call placed in background-image (or any image-accepting property). They paint smoothly between color stops with no extra HTTP request.
Three flavors
linear-gradient()— straight line; control direction with an angle or ato top rightkeyword.radial-gradient()— emanates outward from a point; shape can becircleorellipse.conic-gradient()— sweeps around a center; great for pie-chart and gauge visuals.
Tips
- Use 3+ stops with intermediate hues to avoid muddy "gray middle" transitions between very saturated colors.
- Repeat with
repeating-linear-gradient()for stripes and patterns. - Read the MDN gradient reference for the full grammar.