CSS Gradient Generator

Design linear, radial or conic gradients, test text contrast, preview real UI and export the CSS or PNG.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Builds production-ready linear, radial and conic gradients with up to 12 positioned colour stops, per-stop opacity and deliberate hard edges, then audits text contrast across the whole blend before exporting code, PNG or a reusable preset.

How to use it

1Choose Linear, Radial or Conic, then set the angle or centre, radial shape and size that apply to that geometry.
2Edit each stop's hex colour, opacity and position; use Hold until or a hard edge when a colour must stay flat instead of blending immediately.
3Set the real text colour, size, weight and opaque base, then check the 201 sampled positions, worst contrast, passing coverage and safer black-or-white choice in the live page, card and UI previews.
4Copy the CSS or literal Tailwind arbitrary properties, export a transparent PNG up to 16 megapixels, or copy/import the version-1 preset JSON.

Example

Input: The defaults: Linear, 135°, #6366f1 at 0% and #ec4899 at 100%
Output: background-color: #ffffff; background-image: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 100%);

The CSS keeps a separate solid base so translucent stops have a known preview and audit background. Stops are sorted by position; duplicate positions create hard edges. The PNG defaults to 1600 × 900 and keeps alpha rather than flattening it onto that audit base.

What happens to your data

Everything is generated in this browser tab; no colours, copy, preset or PNG is uploaded or saved between visits. Contrast is a 201-point WCAG sample rather than certification, and transparent stops, moving gradients, imagery, shadows and browser colour management can change the real rendered result. CSS uses the browser's normal sRGB interpolation; off-centre ellipse PNG geometry can differ slightly from CSS, and conic PNG export needs a current browser.

Last updated September 2026

Design linear, radial, or conic gradients with explicit geometry and up to 12 editable colour stops. Each stop has hex colour, alpha, position, and an optional hold-until point for controlled bands or hard edges.

Use the same live gradient in background, card, button, progress, and badge previews, then copy portable CSS, a literal Tailwind arbitrary-property class, a versioned preset, or a transparent PNG.

How it works

Linear gradients expose angle; conic gradients expose start angle and centre; radial gradients expose centre, circle or ellipse shape, and CSS extent. Duplicate stop positions are generated for hard edges without relying on experimental colour-interpolation syntax.

The readability audit samples 201 positions across the complete blend, composites alpha over your base colour, and reports worst and best WCAG text contrast, passing coverage, and the safer of black or white. Sampling can catch failures between stops, but it cannot certify moving backgrounds, imagery, shadows, or every rendered browser state.

CSS is the authoritative portable output. Tailwind output uses a literal arbitrary property that must remain discoverable in source. PNG export is limited to 4,096 px per side and 16 megapixels; unusual off-centre radial ellipse sizing can differ slightly between Canvas and CSS.

Common use cases

Build brand, hero, card, and interface gradients
Create transparent colour overlays with explicit alpha
Make stripes, bands, and hard colour transitions
Audit text across the weakest part of a gradient
Share and restore exact geometry with version-1 preset JSON
Export a transparent PNG when a raster asset is required

Frequently asked questions

Which gradient geometry can I control?＋

Choose linear, radial, or conic. Linear and conic modes expose angle controls; radial and conic expose centre position; radial also offers circle or ellipse and the standard closest/farthest side or corner extents.

How do hold-until values and hard edges work?＋

Hold until repeats a stop colour at a later position, preserving a solid band before blending. The hard-edge action duplicates adjacent stop positions so one colour switches directly to the next.

Does the contrast audit test only the colour stops?＋

No. It samples 201 positions across the rendered blend and reports the weakest result, passing coverage, and strongest result after transparent colours are composited over the selected base.

Is the Tailwind output a named gradient utility?＋

No. It is an honest literal arbitrary background-image property containing the generated CSS. Keep the complete class in source so Tailwind can detect and generate it.

What are the PNG export limits?＋

Width and height can each be up to 4,096 px, with a combined limit of 16 megapixels. Alpha remains transparent; conic Canvas export requires a current browser.

What does preset JSON preserve?＋

The version-1 preset stores gradient type, geometry, colours, alpha, stop positions, and hold-until values. Import validates the version and requires between 2 and 12 stops.

Will the gradient look identical in every browser?＋

Linear and radial gradients have broad support, while conic gradients and conic Canvas export need a current browser. CSS uses the browser's normal sRGB interpolation; the tool does not claim perceptual OKLCH interpolation.

Is gradient data uploaded?＋

No. Editing, contrast sampling, preset handling, and PNG creation run locally in your browser.