CSS Gradient Generator

Create beautiful linear and radial CSS gradients with live preview. Add multiple color stops and copy-ready CSS. Free, no signup.

Preparing private browser tool…

Your file will stay on this device.

Color reference

Look up any of 539 common colours, including every CSS named colour plus the Tailwind and Material palettes. Each page lists RGB, HSL, HSV and CMYK values, tints and shades, harmonies, and WCAG contrast.

Related tools

Mesh Gradient Generator

Create stunning CSS mesh gradients with multiple color stops. Free online generator with live preview and copy-ready code. No signup.

CSS Neumorphism Generator

Build soft UI neumorphic shadows with live preview and copy-ready CSS. Adjust intensity, blur, and shape. Free online, no signup.

Noise Texture Generator

Generate CSS noise textures as data URLs with live preview and copy-ready code. Customize grain and opacity. Free, no signup.

CSS Box Shadow Generator

Create beautiful box shadows with live preview and copy-ready CSS. Layer multiple shadows with full control. Free, no signup.

CSS Border Radius Generator

Create rounded corners with independent control over each corner. Live preview and copy-ready CSS. Free online tool, no signup.

CSS Clip Path Generator

Pick from common clip-path shapes and copy the CSS instantly. Free online generator with circle, polygon, and inset presets.

Frequently asked questions

Linear or radial?
Both. Linear uses an angle (0–360°); radial uses a circle or ellipse centered at the box. Each supports unlimited color stops.
Can I add more than 2 color stops?
Yes. Click "Add color stop" to insert additional colors at any position (0–100%).
Does the output CSS work in all browsers?
Yes. Modern CSS gradients are supported in all browsers from 2012+. No vendor prefixes needed.
Can I save or share a gradient?
Copy the CSS directly. To save, paste it into your stylesheet — there's no account or cloud storage.