Cubestack

CSS Gradient Generator

Free CSS gradient generator — design linear, radial and conic gradients with any number of colour stops, preview them live and copy the CSS.

background: #ff7a1f;
background: linear-gradient(135deg, #ff7a1f 0%, #d93a3a 100%);
°
0360

Colour stops

0%
100%

What is the CSS Gradient Generator?

CSS gradients blend colours smoothly without image files — for backgrounds, buttons and hero sections. This generator builds the CSS while you see the result.

How to use it

  1. 1

    Pick a type and angle

    Or a preset.

  2. 2

    Set the colours

    Add or remove stops.

  3. 3

    Copy the CSS

    Paste into your stylesheet.

Features

  • Linear, radial, conic

    All three gradient types.

  • Unlimited stops

    Colour and position for each.

  • Presets

    Start from a ready gradient.

  • Fallback colour

    Included in the CSS.

Popular uses

  • Website backgrounds

    Hero sections and cards.

  • Buttons

    Subtle depth.

  • Social graphics

    Quick colourful backgrounds.

Frequently asked questions

Do gradients work in all browsers?

Yes — linear and radial everywhere, conic in all current browsers.

Why is there a plain background line too?

It's a fallback for very old browsers.

Related tools