Open menu

CSS Gradient Generator

Build linear, radial, conic and mesh gradients by dragging color stops on a bar, choose how colors blend (classic sRGB or smooth OKLab and OKLCH), add a grain texture, and apply the result to a background, text or a border. Start from 300 presets, check text contrast across the whole gradient, then copy CSS with a fallback included, or download SVG and PNG images.

Preset gallery
Gradient

Modern color mixing (OKLab, OKLCH, HSL) is in all current browsers. The export also includes a plain sRGB line first, so older browsers still show a gradient.

Accessibility checks

  • Pass Text over the gradient has at least 4.6:1 contrast at its weakest point, which meets WCAG AA (4.5:1).
  • Pass An sRGB fallback comes first, then the oklch version, so every browser shows a gradient.
  • Pass 1 gradient layer(s): cheap to paint.

Export code

.gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #DB2777 100%);
  background: linear-gradient(135deg in oklch, #4F46E5 0%, #DB2777 100%);
  border-radius: 20px;
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Gradient type
Gradient type
Apply to
Color stops
Color stops

Click the bar to add a stop there. Drag stops or use the arrow keys.

Editing the stop at 0%.

Color
Grain, text & border

How to use the CSS gradient generator

  1. Pick a preset from the gallery. Filter by mood (warm, cool, pastel, vivid, dark, earthy, neon, monochrome) or by type, then select Customize.
  2. Choose the gradient type: linear, radial, conic or mesh. Then choose what it applies to: a background, text, or a border.
  3. Edit the color stops. Drag the handles on the stop bar, or focus one and use the arrow keys (Shift moves 10%; Delete removes it). Click anywhere on the bar to add a stop there, up to 10 in total.
  4. Set the direction. Drag the angle dial for linear and conic gradients, or drag the center point for radial and conic ones. For mesh gradients, drag each color point on the pad.
  5. Choose the color mixing. OKLCH gives vivid, even blends. sRGB matches the classic look.
  6. Add a finish: a grain overlay, rounded corners, or sample text to test readability.
  7. Review the checks, then copy or download CSS, CSS variables, SCSS, Tailwind classes, an SVG file, or a PNG image in a choice of sizes.

How it works: anatomy of a CSS gradient

A gradient is an image, so it goes in background or background-image:

background: linear-gradient(135deg in oklch, #4F46E5 0%, #DB2777 100%);
  • Direction. For linear gradients, 0deg points up and angles turn clockwise, so 90deg runs left to right. Radial gradients start at a center point; conic gradients sweep around one.
  • Color stops are a color plus a position. Two stops at the same position make a hard edge instead of a blend.
  • Interpolation method. in oklch or in oklab blends in a perceptual color space. longer hue takes the long way round the color wheel, which gives rainbow effects from two colors.
  • Repeating gradients repeat the stop pattern to fill the box, which is handy for stripes and rings.

Browser support and fallbacks

Linear, radial, conic and repeating gradients work in every current browser. Color interpolation methods (in oklch) work in all current major browsers, and the studio always writes an sRGB line first as a fallback. Gradient text uses background-clip: text along with the -webkit- prefix that some browsers still need.

Worked examples

Example 1: a hero background with readable text

Load Midnight · Mesh, set Text over the gradient to white, and type your headline. The contrast check measures the darkest and lightest points of the mesh and confirms the text passes WCAG AA.

Example 2: a gradient heading

Load Electric · Linear, then switch Apply to to Text. The export gives you the background-clip: text rules, with a solid color set first as a fallback.

Example 3: a gradient border card

Load Aurora · Three-stop and set Apply to to Border. The studio uses two background layers, one clipped to the padding box and one to the border box, so the border follows rounded corners exactly without extra elements.

Tips and common mistakes

  • Muddy midpoints. Complementary colors such as blue and orange turn grey in sRGB. Switch to OKLCH or add a middle stop.
  • Text on busy gradients. Check the weakest contrast point, not the average. A semi-transparent scrim behind the text helps when the gradient has to stay vivid.
  • Banding on large areas. Smooth gradients over big dark areas can show steps. A light grain overlay at 10–20% hides banding.
  • Too many mesh layers. Each mesh point is a full-size layer. Keep to around five, and don’t animate large mesh backgrounds.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads the first linear, radial or conic gradient in background or background-image (repeating ones too), with its angle, shape, center and stops, plus border-radius. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

What is the difference between sRGB and OKLCH gradients?

Classic sRGB mixing goes in a straight line through RGB values, so blue to yellow passes through a dull grey middle. OKLab and OKLCH mix in a space modelled on human vision, which keeps the midpoint bright and the brightness even. OKLCH also travels around the hue wheel, so blue to yellow passes through green or pink instead of grey.

Will OKLCH gradients work in older browsers?

The export writes a plain sRGB background line first and the modern line second. Browsers that don't understand the "in oklch" syntax ignore the second line and keep the first, so everyone sees a gradient.

What is a mesh gradient?

CSS has no native mesh gradients, so the studio layers several soft radial gradients over a base color. Each point is a blob of color you can drag, recolor and resize. The result is the soft, multi-color look of a design-tool mesh in plain CSS.

How does gradient text work?

The gradient is painted as the element's background, then background-clip set to text cuts it to the letter shapes and the text color is made transparent. The export sets a solid color first, so the text stays visible in browsers without background-clip support.

How is text contrast checked on a gradient?

The studio samples 25 points along the gradient in its color space and measures the contrast of white or dark text at each one. The check reports the weakest point, because that's where people will struggle to read.

Why is the SVG export different for conic gradients?

SVG has linear and radial gradients but no conic ones, so the SVG file uses a linear approximation. The CSS and PNG exports draw the real conic gradient.

Is the grain overlay heavy?

No. It's a tiny inline SVG noise filter stored in a data URI. There is no image download, and the browser renders it once and tiles it.

Sources