My Tool Studio
CSS

CSS Gradient Generator

This CSS gradient generator builds linear, radial and conic gradients with up to ten color stops. Drag the stop handles along the bar, click the bar to add a stop, and give each stop its own opacity. Start from 40 palettes or 8 pattern presets such as a color wheel, pie chart, stripes and a spotlight. Radial gradients get shape, size and center controls, conic gradients get a start angle and center, and a Repeating switch tiles any type. A color blending option writes in oklab, in oklch or in hsl to avoid gray middles, with a plain fallback line kept first. Preview the gradient as a background, on text, a button or a card, then copy CSS, Tailwind or SCSS, download a PNG, or share a link to your settings.

Always freeNo sign upRuns in your browser
Repeating

Click the bar to add a stop. Drag a handle, or focus it and use the arrow keys (Shift for 10%). Delete removes it.

Selected stop 1

%
Opacity 100%
Angle135deg
Add a solid background-color fallback

Palettes (keep the current type and angle)

Patterns (set type, angle and stops)

background-color: #6366f1;
background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

How to use

01

Pick a type and a starting point

Choose Linear, Radial or Conic, then click a palette (keeps your type and angle) or a pattern (sets type, angle and stops together). Random and Reverse give quick variations.

02

Edit the stops and geometry

Drag the handles on the stop bar or focus one and use the arrow keys. Set each stop's color, position and opacity, then the angle, radial shape and size, center point, Repeating and color blending.

03

Check it and copy

Switch the preview between Background, Gradient text, Button and Card. Copy the CSS, Tailwind, SCSS or gradient text code, download a 1600 x 900 PNG, or copy a share link.

Why CSS Gradient Generator

Linear vs radial vs conic gradients

All three take the same list of color stops. What changes is the path the colors follow. Stop positions mean distance along a line for linear, distance from the center for radial, and angle around the center for conic.

Each type also has a repeating version, such as repeating-linear-gradient, which tiles the stop pattern across the element. That is the usual way to draw stripes. Switch on Repeating in the tool to write it.

TypeColors change alongExampleGood for
LinearA straight line at an anglelinear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)Backgrounds, buttons, fades
RadialOutward from a center pointradial-gradient(circle at 30% 20%, #fde047 0%, #f97316 100%)Spotlights, glows, vignettes
ConicAround a center pointconic-gradient(from 0deg, #ef4444 0%, #ef4444 25%, #3b82f6 25%, #3b82f6 100%)Pie charts, color wheels, spinners

Radial gradient size keywords

The Size dropdown on the Radial tab controls where the gradient ends, which is where the 100% stop sits. The default, farthest-corner, is left out of the output because browsers use it anyway.

Size matters most when the center is moved away from the middle. With the center at 20% 20%, closest-side ends the gradient near the top-left edge, while farthest-corner stretches it to the bottom-right corner. Try both with Center X and Center Y to see the difference.

KeywordThe gradient ends atEffect
farthest-cornerThe corner farthest from the centerDefault; the widest, softest spread
farthest-sideThe side farthest from the centerSlightly tighter than farthest-corner
closest-cornerThe corner nearest the centerTighter when the center is off to one side
closest-sideThe side nearest the centerSmallest; the last color fills the rest

Common questions

How many color stops can a gradient have in this tool?
Two to ten. Each stop has a color, a position from 0 to 100 percent and an opacity. Two stops at the same position make a hard edge, which is how stripes and pie slices are made. Select a stop and press Delete to remove it.
What angle should I use for a linear gradient?
In CSS, 0deg points up and 90deg points right, so the default 135deg runs from top left to bottom right. 180deg is a plain top to bottom fade. The eight angle buttons under the slider jump to the common directions.
How do I add transparency to a CSS gradient stop?
Select the stop and lower its Opacity slider. The output writes that stop as rgba(), for example rgba(99, 102, 241, 0.5). The stop bar shows a checkerboard behind the gradient so you can see the transparent parts. Typed rgba() or hsl() values also work.
What is the difference between circle and ellipse in a radial gradient?
A circle keeps the same radius in every direction, so on a wide element it looks like a round spotlight. An ellipse stretches to the element's proportions. The Size option decides where the last stop lands, for example at the farthest corner or the closest side.
Can I move the center of a radial or conic gradient?
Yes. Center X and Center Y set the position in percent. When the center is not 50% 50%, the output adds at X% Y%, for example radial-gradient(circle at 30% 20%, ...). A radial center near a corner makes a soft glow effect.
How do I make a pie chart with a conic gradient?
Click the Pie chart pattern. It sets a conic gradient with pairs of stops at the same position, such as red 0%, red 25%, blue 25%, blue 60%, green 60%, green 100%. Drag the handles to resize the slices and add border-radius: 50% to your element to make it round.
Why does my gradient look gray or muddy in the middle?
Browsers blend gradients in sRGB by default, and opposite colors like blue and orange pass through gray. Set Color blending to OKLab or OKLCH and the output adds in oklab or in oklch, which keeps the middle bright. A plain sRGB line is written first for older browsers.
What does the Repeating switch do?
It changes the function to repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient, which tiles the stop pattern across the element. Keep the stops within a short range, such as 0 to 10 percent, to get stripes or rings. The Stripes and Rings patterns show the idea.
Can I download the gradient as an image?
Yes. Download PNG draws the gradient on a 1600 x 900 canvas in your browser and saves it. The image uses standard sRGB blending, so an OKLab or OKLCH hint is not reproduced, and repeating gradients are not exported.
Does gradient CSS from this tool need vendor prefixes?
No. Linear, radial and conic gradients work unprefixed in current Chrome, Edge, Firefox and Safari. The optional background-color line is a solid fallback, not a prefix. The Text CSS tab adds -webkit-background-clip, which some browsers still need for gradient text.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS

CSS Animation Generator

Build @keyframes animations from presets

CSS