CSS Gradient Generator

Design linear and radial CSS gradients with multiple colour stops and a live preview.

Runs in your browser Free

Type

Linear Radial

Angle

135°

Color stops

CSS

Processed locally in your browser.

Eye-catching backgrounds

Gradients add depth and energy to buttons, hero sections, cards and backgrounds in modern web design. The CSS Gradient Generator lets you design a gradient visually and copy the code in one click.

Features

Linear (linear-gradient) and radial (radial-gradient) gradients
Add as many colour stops as you like and drag their positions
Angle and direction control
Live preview

CSS instead of images

Gradients made in CSS rather than image files keep pages light, stay sharp at every screen size and update with a single change. The code works in every modern browser without prefixes.

How to use CSS Gradient Generator

Choose the gradient type.
Add colour stops and set their colours and positions.
Set the angle and check the preview.
Copy the CSS into your stylesheet.

Why use this tool?

Get production-ready, lightweight gradient code without opening a design tool.

FAQ

Do gradients work in every browser?

Yes. linear-gradient() and radial-gradient() are supported in all modern browsers without prefixes.

Can I apply a gradient to text?

Yes. Use the generated background with background-clip: text and color: transparent.

Can I use transparent colours?

Yes, add rgba or semi-transparent colour stops to create overlays on images.

Related tools

Private

Box Shadow Generator

Create CSS box-shadow values with offset, blur, spread, colour and inset controls.

Open tool

Private

Border Radius Generator

Design rounded corners visually; set all four corners together or individually.

Open tool

Private

Color Code Converter

Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.

Open tool

Private

CSS Minifier

Shrink your CSS files by removing comments and unnecessary whitespace.

Open tool