🎨 CSS Gradient Generator: Build Linear and Radial Gradients

What is the CSS Gradient Generator?

A CSS gradient is a smooth transition between two or more colors that the browser renders as a background image without loading a single image file. Because the gradient is drawn from code rather than a downloaded picture, it stays razor sharp at every zoom level and screen density, adds nothing to your page weight, and can be recolored instantly by editing a few characters. A good gradient generator hides the syntax behind color pickers and a live preview so you can focus on how the blend looks rather than memorizing the exact punctuation the browser expects. The quickest way to learn the pattern is to build one here, read the generated line, and paste it straight into your stylesheet.

The two shapes this gradient generator produces are linear and radial. A linear gradient runs colors along a straight line across the box, and you control the direction with an angle: linear-gradient(90deg, #4F46E5, #EC4899) sweeps left to right, while 180deg runs top to bottom and 0deg runs bottom to top. A radial gradient instead spreads outward from a center point like a spotlight, written as radial-gradient(circle, #4F46E5, #EC4899), so the first color sits in the middle and the last color reaches the edges. This linear gradient generator and radial gradient generator share the same color controls, so you can flip between the two shapes and compare them without redoing your palette. CSS also defines a third type, the conic gradient, which sweeps colors around a center like a color wheel and powers pie charts and angular effects; it is worth knowing about even though this background gradient generator focuses on the two shapes designers reach for most.

Color stops are the heart of any gradient. Each stop is a color, and the browser fills the space between stops with a seamless blend. Two stops give you a simple fade; adding an optional third stop lets you pass through a middle hue, which is how designers create sunset skies, brand ribbons, and eye-catching hero banners. The order matters: in a linear gradient the stops are read along the angle line, and in a radial gradient they are read from the center outward. By default our css gradient maker spaces the stops evenly, which is the sensible choice that covers the vast majority of real designs. In hand-written CSS you can also pin a stop to a position, such as linear-gradient(90deg, #4F46E5 0%, #EC4899 60%), to bias the blend toward one side, and placing two stops at the same position creates a hard line instead of a fade, the trick behind stripes and split backgrounds.

Angle is the one control unique to linear gradients, and CSS measures it clockwise from pointing straight up. That means 0deg points the gradient toward the top, 90deg toward the right, 180deg toward the bottom, and 270deg toward the left. A 45deg diagonal is the classic choice for cards and buttons because it feels dynamic without being distracting. You can also write the direction as a keyword, so to right equals 90deg and to bottom right equals roughly 135deg on a square box; the numeric form this online gradient tool outputs is exact and works everywhere. Because the angle is just a number from 0 to 360, you can nudge it one degree at a time to line the color transition up precisely with the shape it sits behind. Radial gradients ignore the angle entirely, so the gradient generator hides that control when you switch to radial.

Once you are happy with the blend, the output is a single background declaration you paste straight into your stylesheet or an inline style attribute: background: linear-gradient(90deg, #4F46E5, #EC4899);. That one line works in every modern browser on any element, from a full-page hero to a tiny badge, and it scales to any size because the browser recomputes the gradient rather than stretching a bitmap. According to MDN Web Docs, linear-gradient, radial-gradient, and conic-gradient are all baseline features supported across current Chrome, Firefox, Safari, and Edge without vendor prefixes, so the clean code this gradient generator produces needs no fallbacks for today's browsers (developer.mozilla.org/en-US/docs/Web/CSS/gradient). You can also drop the value into CSS custom properties, Tailwind arbitrary values, or a design token so the same gradient stays consistent across a whole site.

Gradients reward restraint. Two colors that are close in hue read as premium and calm, while wildly different colors can look muddy where they meet because the midpoint blends toward gray. If a two-color blend looks dull in the middle, enabling the third stop with a brighter transitional color usually fixes it. You can also add transparency for overlays: because an rgba color or a color with an alpha channel can be a stop, a gradient from a solid color to a fully transparent one creates a fade-to-clear scrim that is perfect for darkening the bottom of a hero image behind white text. Keeping the whole thing accessible matters too, since a gradient changes brightness across its width, so preview your real text against the lightest and darkest parts of the blend before you ship and make sure it clears WCAG contrast at every point.

When to use it

• Designing a hero banner or landing-page background with a modern two or three color blend.
• Creating gradient buttons, badges, and cards without exporting a single image file.
• Prototyping brand color directions quickly by swapping stops and comparing linear versus radial.
• Generating a background value to drop into a CSS custom property or a Tailwind arbitrary class.
• Matching a gradient in a design mockup by dialing in the exact hex colors and angle.
• Building a fade-to-transparent overlay so white text stays readable on top of a photo.
• Teaching or learning how the linear-gradient and radial-gradient syntax maps to a visual result.

How to use the CSS Gradient Generator

1. Choose Linear or Radial from the gradient type menu at the top.
2. Pick color stop 1 and color stop 2 with the swatches, or type a hex value directly.
3. For a richer blend, tick Enable on color stop 3 and choose a middle color.
4. For linear gradients, drag the angle slider or type a value from 0 to 360 degrees.
5. Watch the live preview box update, then read the generated CSS below it.
6. Click Copy CSS and paste the background declaration into your stylesheet.

Formula & method

Worked examples

Common linear gradient angles and the direction they point

Linear, radial, and conic gradients compared

Popular gradient color pairs to copy

Common mistakes to avoid

• Using the wrong angle reference. CSS measures gradient angles clockwise from straight up, not from the horizontal. If your blend runs the wrong way, remember 90deg is left-to-right and 180deg is top-to-bottom, then adjust from there.
• Expecting the angle to affect a radial gradient. Radial gradients spread outward from a center and ignore angle entirely. That is why the angle control disappears when you switch to radial; change the colors or their order instead.
• Picking colors that muddy in the middle. Two colors on opposite sides of the wheel blend toward gray at their midpoint. If the center looks dull, enable a brighter third stop or choose two hues that sit closer together.
• Forgetting text contrast over the gradient. A gradient changes brightness across its width, so text that is readable on one end can vanish on the other. Check your real text against both the lightest and darkest parts of the blend.
• Typing an invalid hex value. A hex color needs three or six hex digits, like #F0A or #FF00AA. If a swatch will not update, check for a missing digit or a stray character; the tool shows a friendly error until the value is valid.
• Reversing the stop order by accident. The colors are read in order along the angle line (or from center outward for radial). Swapping stop 1 and stop 2 flips the whole gradient, which is an easy fix but a common surprise.

Glossary

Gradient

A smooth transition between two or more colors, drawn by the browser as a background image from CSS code.

Linear gradient

A gradient whose colors blend along a straight line across the element, controlled by an angle.

Radial gradient

A gradient whose colors spread outward from a center point in a circle or ellipse.

Conic gradient

A gradient whose colors sweep around a center point like a color wheel, written with conic-gradient().

Color stop

A single color in a gradient; the browser blends smoothly between consecutive stops.

Stop position

An optional length or percentage after a color, such as #EC4899 60%, that pins where that stop falls.

Angle

For linear gradients, the direction of the blend in degrees, measured clockwise from straight up.

Hex color

A color written as a hash plus three or six hexadecimal digits, such as #EC4899.

Alpha channel

The transparency part of a color; a stop that fades to transparent creates a see-through overlay.

Custom property

A reusable CSS variable, like --brand, that can store a gradient value for use across a site.

Frequently asked questions