Runs in your browser · nothing is uploaded

CSS Gradient Generator

This CSS gradient generator lets you design a linear or radial gradient with 2 to 10 color stops, each with its own position and opacity. Preview it live, copy ready-to-paste background CSS, or download it as a 1200 × 630 PNG.

Type Angle

Color Position % Opacity

Processing stays in your browser. Large images can be slow. GIF output uses a white background and limited colors. SVG scripts, styles and external references are removed before rasterization.

How the gradient CSS is built

Linearlinear-gradient(angle deg, color position%, color position%, …)
Radialradial-gradient(circle at center, color position%, …)
Each stop#rrggbb + opacity → rgba(r,g,b,opacity) position%
Gradient line length (linear)|width × sin(angle)| + |height × cos(angle)|

Stops are sorted by position before the CSS is written, so you can add them in any order. You can use 2 to 10 stops; a new stop starts at 50%. Positions run from 0% at the start of the gradient line to 100% at its end, and the line is long enough that 0% and 100% land exactly on opposite corners.

The copied CSS starts with a solid background fallback, then the gradient. The PNG export draws the same gradient on a 1200 × 630 canvas, using the same line length for linear gradients and a radius of 678 px (center to corner) for radial ones.

Worked example: a text-friendly overlay

A dark slate stop at 0% (opacity 0.9), indigo at 60% (opacity 0.6) and indigo at 100% (opacity 0), angle 180°:

background: #0f172a; background: linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(79,70,229,0.6) 60%, rgba(79,70,229,0) 100%);

Layer it over a photo by adding the image after the gradient, for example background: <gradient>, url(hero.jpg) center / cover;. The top stays dark enough for white text, and the bottom shows the photo.

Radial glow

background: #fde68a; background: radial-gradient(circle at center, rgba(253,230,138,1) 0%, rgba(249,115,22,1) 100%);

Hard stripes (two stops at 50%)

background: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,1) 0%, rgba(239,68,68,1) 50%, rgba(59,130,246,1) 50%, rgba(59,130,246,1) 100%);

Angles, directions and the PNG size

Angle to direction

Angle	Colors travel	Keyword
0deg	Bottom → top	to top
90deg	Left → right	to right
180deg	Top → bottom (CSS default)	to bottom
270deg	Right → left	to left

Corner keywords such as to top right are not always 45deg: CSS adjusts them to the box's shape so the 50% point runs from corner to corner. A fixed angle like 45deg keeps the same direction on every box.

Gradient line on the 1200 × 630 PNG

Angle	Line length	Each 10% of stops
0°	630 px	63 px
30°	1,145.6 px	114.6 px
45°	1,294 px	129.4 px
90°	1,200 px	120 px
135°	1,294 px	129.4 px
180°	630 px	63 px

On a wide image, a vertical gradient (0° or 180°) changes over a short distance and a horizontal one over a long distance, so the same stops look sharper top-to-bottom. Diagonal lines are longer than either side.

Tips: dark, wide gradients can show visible banding on 8-bit screens — adding a middle stop or a little noise in your design tool helps. When text sits on a gradient, check contrast at both the lightest and the darkest point the text covers, not just the average.

Sources: W3C, CSS Images Module Level 3 (linear-gradient angle and gradient line, radial-gradient default size of farthest-corner); MDN Web Docs, "linear-gradient()" and "radial-gradient()". Checked 15 October 2026.

Frequently asked questions

How do I create a CSS gradient?+

Pick Linear or Radial, set the angle, then choose a color, position (0–100%) and opacity for each stop. Press Generate CSS and copy the result. The default settings produce: background: #4f46e5; background: linear-gradient(90deg, rgba(79,70,229,1) 0%, rgba(236,72,153,1) 100%);

What does the angle in linear-gradient mean?+

The angle sets the direction the colors travel. 0deg runs bottom to top, 90deg left to right, 180deg top to bottom and 270deg right to left; values in between run diagonally. The angle only applies to linear gradients.

What shape does the radial gradient use?+

The tool writes radial-gradient(circle at center, …). With no size given, CSS extends the circle to the farthest corner, so on a 1200 × 630 box the last stop reaches 678 px from the center — exactly the corners.

How do I make a gradient fade to transparent?+

Set the last stop's opacity to 0. The tool writes the stop as rgba() with its own red, green and blue values and an alpha of 0, so the color keeps its hue as it fades out. Put the gradient over an image or another background to see the fade.

How do I make hard color stripes instead of a blend?+

Give two neighboring stops the same position. For example, red at 50% and blue at 50% switches color sharply at the midpoint. Add more pairs — up to 10 stops — for multiple bands.

Why does the CSS have two background lines?+

The first line is a solid fallback using the first stop's color, the second is the gradient. Browsers that understand the gradient use the second line; anything that doesn't keeps the solid color. All current browsers support unprefixed linear-gradient and radial-gradient.

What size is the PNG download?+

1200 × 630 pixels, the common size for Open Graph and social share images. It is drawn with the same angle, stops and opacity as the CSS, so you can use it as a background image in tools that don't accept CSS.

How do I make a diagonal gradient?+

Set the angle to 135deg for top-left to bottom-right, or 45deg for bottom-left to top-right. On a box that isn't square these angles don't hit the corners exactly; if you need corner to corner, edit the copied CSS to use a keyword direction such as to bottom right, which adjusts to the box's shape.

Why does the middle of my gradient look gray or muddy?+

Browsers blend gradients in the sRGB color space by default, so two very different colors — blue and orange, say — pass through a dull grayish mix halfway. Add a third stop at 50% with a brighter in-between color to keep the blend vivid.

How do I apply the gradient to text?+

Use the gradient line as the element's background, then add background-clip: text (plus -webkit-background-clip: text for wider support) and color: transparent. The text shows the gradient; keep a solid color fallback for readability if the clip isn't supported.

Can it make conic or repeating gradients?+

No. The tool writes linear-gradient and radial-gradient (a circle from the center) only. CSS also has conic-gradient for color wheels and pie shapes, and repeating-linear-gradient for stripes, but you'd need to write those by hand.

Is anything uploaded?+

No. The preview, CSS and PNG are all generated in your browser, and nothing is stored. Your gradient is lost when you close the tab, so copy the CSS before leaving.