CSS Gradient Generator

About this tool

CSS gradients power everything from hero backgrounds and button fills to overlay scrim layers and progress bars, yet the syntax for multi-stop radial and conic variants is rarely memorized. The CSS Gradient Generator provides a unified panel for linear, radial, and conic gradient types. Add as many color stops as your design needs, drag them to precise positions, and rotate linear gradients with a visual angle dial rather than guessing degree values. A curated preset library offers proven starting points like sunset diagonals, dark radial spotlights, and conic color wheels so you're never starting from a blank canvas. Mix opaque hex colors with RGBA transparent stops for overlay gradients on top of images. Copy the complete background declaration and paste it wherever CSS backgrounds are accepted.

Why use it

• Three Gradient Types: Switch between linear, radial, and conic gradients in a single tool. Most generators only handle linear; this one covers all three with type-appropriate controls — angle for linear, center position for radial, and starting angle for conic.

• Multi-Stop Control: Add as many color stops as your design requires and drag them along the gradient bar to precise percentage positions. Every stop gets its own color picker and position field, so complex three- and four-stop gradients are as easy as simple two-stop ones.

• Angle Slider: A visual rotation dial replaces degree-number guessing for linear gradients. Drag the dial clockwise or counterclockwise and the gradient direction responds immediately, making it easy to lock in diagonals, horizontals, or any custom angle.

• Curated Presets: Load proven starting points like warm sunset, ocean radial, and multi-stop mesh gradients with one click. Presets populate all stop colors and positions, giving you a working base to modify rather than building every gradient from scratch.

• Hex + RGBA: Mix fully opaque hex stops with RGBA transparent stops in the same gradient. This is essential for overlay gradients that fade to transparent over images, or for combining a gradient background with another layer in the background stack.

• Background Ready: The output copies as a complete background shorthand or background-image declaration, whichever your context requires. Paste directly into a CSS rule, Tailwind's arbitrary-value syntax, or a design-token CSS variable definition.

How to use

1. Select a gradient type — linear, radial, or conic — from the type tabs
2. Drag the angle dial to set direction for linear, or move the center point for radial and conic
3. Click Add Stop to insert a new color stop, then drag it to the desired position on the gradient bar
4. Open each stop's color picker to set hue, saturation, brightness, and alpha
5. Choose a preset from the library to load a starting palette and adjust from there
6. Click Copy CSS to grab the complete background or background-image declaration

When it helps

• When designing a hero section background that transitions between two brand colors at a specific diagonal angle
• When creating a scrim overlay that fades from solid black to transparent over a hero photograph
• When building a radial spotlight effect on a dark card or feature highlight section
• When generating a conic gradient for a pie chart, progress ring, or color-wheel component
• When adding multiple gradient layers to fake a mesh gradient in pure CSS
• When porting a Figma gradient fill to CSS and need to match stop positions precisely

Examples

Linear, 135deg, stop 1: #f6d365 at 0%, stop 2: #fda085 at 100%

background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);

Radial, circle at center, stop 1: #4f46e5 at 0%, stop 2: #1e1b4b at 100%

background: radial-gradient(circle at center, #4f46e5 0%, #1e1b4b 100%);

Conic, from 0deg, stops: red, yellow, green, cyan, blue, magenta, red

background: conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red);

Tips

• Use 135deg (top-left to bottom-right) for a natural diagonal that reads left-to-right in most layouts — it follows the same direction as reading flow
• Insert a midpoint color stop at 50% matching a blend of your start and end colors to smooth harsh transitions between saturated hues
• Combine two or three stacked radial-gradient() backgrounds with rgba transparency to fake a soft mesh gradient in pure CSS
• Use rgba(0,0,0,0) rather than the keyword transparent for stop colors to avoid gray desaturation artifacts during the fade in some browsers
• Conic gradients with the from 0deg angle work as pie charts — set each color's stop width proportional to the percentage it represents

Frequently Asked Questions

Glossary

Linear Gradient

A CSS gradient that transitions colors along a straight line at a specified angle or direction, such as linear-gradient(to right, #ff0000, #0000ff).

Radial Gradient

A CSS gradient that emanates outward from a center point as a circle or ellipse, transitioning through specified color stops from inside to outside.

Conic Gradient

A CSS gradient where color transitions sweep around a center point like clock hands, making it suited for pie charts, color wheels, and angular patterns.

Color Stop

An individual color value at a specific position within a gradient, defined as a color plus an optional length or percentage that determines where the color peaks.

Gradient Angle

The direction of a linear gradient specified in degrees, measured clockwise from the top. 0deg is upward, 90deg is rightward, and 180deg is downward.

Mesh Gradient

A complex multi-point gradient effect where colors blend from several anchor points simultaneously. Approximated in CSS by layering multiple semi-transparent radial gradients.