CSS Gradient Generator

Create linear, radial, and conic CSS gradients visually. Add color stops, set angle, and copy production-ready CSS.

Build a linear, radial, or conic CSS gradient with a visual stop-and-handle editor — drag stops on a track, pick colours, set angle, then copy the CSS. Includes the modern @supports paths for hard-stop gradients (banded look), and the older fallbacks for browsers that don't support the newer interpolation methods. Useful for hero backgrounds, button states, and any design where a flat colour would feel cheap. The CSS is composed in your tab; no design data goes anywhere.

Live Preview

Preview updates instantly

Presets

Tap to apply

Edit Gradient

135°

Color Stops

0%
100%

CSS Output

background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);

Next steps

CSS Box Shadow Generator

Generate complex CSS box shadows visually with a live preview.

Color Palette Generator

Pull a beautiful color palette from any image — export as CSS or JSON.

Code Formatter

Make messy code readable — beautify or minify JS, HTML, CSS, YAML, and SQL.

HTML Encoder / Decoder

Encode HTML special characters to entities and decode them back.

View all tools →
Runs right inside your browser tab. No uploads. Your files stay private.

Build And Copy linear-gradient, radial-gradient, And conic-gradient CSS

CSS Gradient builds the three native CSS gradient functions defined in the CSS Images Module Level 3 and 4: linear-gradient travels in a straight line at a given angle, radial-gradient emanates from a centre point outward as a circle, and conic-gradient sweeps colour stops around a centre angle and is the easiest way to build pie-chart fills without SVG.
The generator stores the gradient as a small object in React state — type, angle, shape, position, and an array of stops with colour and percentage. The preview is rendered with a CSS background shorthand so it always matches what your production CSS will paint, pixel for pixel.
Stop positions are clamped between 0% and 100% and the list is automatically sorted before the CSS is serialised, which avoids the common mistake of writing stops out of order (browsers do not reorder them and may render flat bands as a result). Up to ten stops are supported in the UI; the CSS spec allows arbitrarily many.
Output is plain CSS that you can paste directly into any stylesheet, Tailwind arbitrary value, styled-components literal, or Figma's CSS panel. The Copy button uses the modern Clipboard API and falls back to a hidden textarea when the page is loaded over HTTP for compatibility with older browsers.
Browser support is excellent for linear-gradient and radial-gradient — both have shipped in every browser since Chrome 26, Firefox 16, and Safari 6.1. conic-gradient is more recent: Chrome 69, Edge 79, Firefox 83, and Safari 12.1. If you need to support browsers older than that, fall back to SVG or a static image.
Gradients are computed in sRGB by default, which can produce muddy mid-tones when you blend across complementary hues. CSS Color Module 4 introduced an `in oklch` syntax for perceptually smoother blends; the spec is supported in Chrome 111 and newer and Safari 16.4. You can hand-edit the copied CSS to add `in oklch` if you need that.
The generator does not export PNG or JPEG fallbacks because gradients are vector and resolution-independent — there is no quality loss at any size. If you need a raster export for a platform that does not support CSS, screenshot the preview and run it through Image Compressor.

Common Use Cases

01

Hero section backgrounds

Build eye-catching multi-stop linear gradients for landing-page hero sections without paying for stock photography.

02

Button and CTA fills

Add subtle two-stop gradients to primary action buttons so they feel three-dimensional even in flat design systems.

03

Conic pie-chart placeholders

Use conic-gradient with hard stops to fake pie or donut charts in a card without pulling in a charting library.

04

Dark mode surfaces

Build very subtle dark-to-darker gradients (say, #0b1220 to #111827) to add depth to stacked panels in a dark theme.

Frequently Asked Questions

linear-gradient travels in a straight line at a given angle (or named direction like 'to right'), radial-gradient draws colour out from a centre point through a circle or ellipse, and conic-gradient sweeps stops around a centre angle. Conic is the only one that can produce pie-chart-style hard wedges without SVG.
The UI caps the list at ten so it stays readable. The CSS specification itself imposes no limit — if you need more, paste the generated CSS into your stylesheet and add extra stops by hand.
Not quite. It needs Chrome 69, Edge 79, Firefox 83, or Safari 12.1 and newer. For older Safari or in-app webviews you'll need an SVG fallback or a CSS @supports rule.
The preview uses the exact same CSS that gets copied. Apparent differences are almost always caused by the parent element's background — gradients with transparent stops blend with whatever sits behind them, so make sure your target surface is the same colour as the preview backdrop.
Not directly — CSS gradients are vector and don't have a fixed resolution. If you need a raster image (for a Slack message or a platform without CSS), take a screenshot of the preview and run it through Image Compressor or Image Converter.
Not in the UI yet. The output uses default sRGB blending. You can edit the copied CSS to add `in oklch` for perceptually smoother mid-tones in Chrome 111+ and Safari 16.4+.
Yes — set two stops to the same colour with the same position, or two different colours at the same position. The latter creates a clean hard edge, which is how you build stripe and chart-style gradients.
Direct interpolation of `background-image` is not supported across browsers. The usual technique is to set the gradient on a larger background-size and animate `background-position`, or use the @property API to register a custom property and transition it.
Linear and radial gradients are pixel-identical across every modern browser. Conic gradients are also stable today but very early implementations had small rounding differences at sharp angles — if you support Safari 12.1 specifically, double-check there.
Not yet — copy the CSS into a snippet manager or your design system tokens file. Persistent saves on Toolnest are kept tool-local where they exist; this tool is currently stateless.
Maintained by the WebToolVerse teamLast updated Suggest an edit

Advertisement