UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Gradient Generator

Create linear or radial gradients with stops, angles, and copy-ready background snippets.

About CSS Gradient Generator

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 CSS Gradient Generator

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 CSS Gradient Generator

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

When to use CSS Gradient Generator

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

Sunset linear

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

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

Radial spotlight

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

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

Conic color wheel

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

Output: 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

What is the difference between linear, radial, and conic gradients?▾

Linear gradients transition colors along a straight line at a given angle. Radial gradients expand outward from a center point in a circle or ellipse. Conic gradients sweep colors around a center point like clock hands, making them ideal for pie charts and color wheels.

How do I add more than two color stops to a gradient?▾

Any CSS gradient accepts a comma-separated list of color stops after the initial direction or position argument. Each stop can specify a percentage or length position. The generator's Add Stop button inserts an extra stop that you can position and color independently.

Can I make a transparent-to-color gradient overlay?▾

Yes. Set the first stop to rgba(0,0,0,0) or a transparent value and the last stop to your target opaque color. This creates a fade-in effect commonly used as a scrim over hero images to ensure text legibility at the bottom.

Why does my linear gradient angle look wrong?▾

CSS gradient angles are measured clockwise from the top of the element (0deg points up, 90deg points right). This differs from standard mathematical angles (counterclockwise from the right). Using the to keyword syntax like to bottom right is often more intuitive than degree values.

How do conic gradients differ from radial?▾

Radial gradients expand color outward from a center point as concentric rings. Conic gradients rotate color around a center point as wedge-shaped segments, similar to a pie chart. Both support the at keyword to position the center.

Can I animate a CSS gradient between two states?▾

Gradients are not directly animatable with transitions because they are background images, not color values. A workaround is to animate background-position on an oversized gradient, or use CSS custom properties with @property to register them as animatable color values.

Are CSS gradients supported in all modern browsers?▾

Linear and radial gradients have near-universal support. Conic gradients are supported in all major modern browsers including Chrome, Firefox, Safari 12.1+, and Edge. Vendor prefixes are no longer needed for any gradient type in current browser versions.

How do I create a mesh gradient with pure CSS?▾

Stack multiple radial-gradient() values in a single background property separated by commas. Position each radial at different coordinates with different colors and high blur. The overlapping translucent circles blend to approximate a soft mesh gradient without SVG or images.

Explore the category

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.