The free CSS gradient generator for linear, radial and conic gradients

This CSS gradient generator lets you design smooth color blends visually — drag the angle dial, add or remove color stops, pick a radial shape or a conic sweep — and export clean, copy-paste CSS, Tailwind or SVG in seconds. Watch the live preview update instantly as you tweak each stop, load a curated preset, or hit randomize for a fresh palette. No sign-up, no watermark, completely free.

What is a CSS gradient?

A CSS gradient is an image generated by the browser that transitions smoothly between two or more colors. Because gradients are computed natively, they scale crisply at any resolution, add zero HTTP requests, and animate well. They are created with the linear-gradient(), radial-gradient() and conic-gradient() functions and are typically applied to the background (or background-image) property. Each color in the blend is a color stop, optionally pinned to a position such as 50%.

How to create a gradient with CSS

1. Choose a gradient type — linear for a straight directional blend, radial for a circular glow, or conic for a swept color wheel.
2. Set the direction — drag the angle dial for linear gradients, or pick a shape and position for radial and conic.
3. Add color stops — click the gradient bar to drop a new stop, then drag it to reposition between 0% and 100%.
4. Fine-tune each stop — select a marker and edit its color, hex value and exact position.
5. Copy the code — grab the generated background CSS, Tailwind arbitrary value, or an inline SVG and paste it into your project.

Linear vs radial vs conic gradients

A linear gradient blends colors along a straight line at a given angle — perfect for backgrounds, buttons and hero sections. A radial gradient radiates outward from a center point in a circle or ellipse, ideal for spotlights, glows and soft vignettes. A conic gradient sweeps colors around a center point like a color wheel or pie chart, great for loaders, badges and decorative rings. This generator supports all three and writes the correct syntax for whichever you pick.

Features of this gradient generator

• Interactive angle dial — drag a polished SVG dial to set the linear gradient direction.
• Draggable color stops — click to add, drag to move and click to select any stop on the bar.
• Linear, radial & conic — full support for all three native CSS gradient types.
• Curated presets — Sunset, Aurora, Ocean, Peach, Mint, Grape, Fire, Dusk and Mono.
• One-click randomize — generate a pleasing, balanced palette instantly.
• Export anywhere — copy as CSS, Tailwind arbitrary values or inline SVG with gradient defs.

Browser support for CSS gradients

Linear and radial gradients are supported in every modern browser — Chrome, Edge, Firefox and Safari — and have been for years. conic-gradient() is supported in all current evergreen browsers; very old versions may need a fallback solid color. Because the generated code uses standard syntax, it works without vendor prefixes in today's browsers.

CSS gradients — frequently asked questions