Color Tools

CSS Gradient Generator

Build beautiful linear and radial CSS gradients with a live visual editor. Add multiple color stops, control the direction, and copy production-ready CSS in one click.

Linear & radial types

Switch between linear gradients (with angle control) and radial gradients with a single click.

Multiple color stops

Add or remove color stops beyond the default two to create complex multi-color gradients.

Copy CSS instantly

Get the production-ready CSS background property copied to your clipboard with one click.

Type

Angle: 135°

0°90°180°270°360°

Presets

Color Stops

Stop 1
Stop 2

CSS Output

background: linear-gradient(135deg, #ff7a18, #32d2ff);

How to create a CSS gradient

  1. Step 1

    Choose colors and type

    Pick your gradient colors using the color pickers, then select linear or radial type.

  2. Step 2

    Adjust the angle

    For linear gradients, drag the angle slider to rotate the direction from 0° to 360°.

  3. Step 3

    Copy the CSS

    Click 'Copy CSS' to copy the background property. Paste it directly into your stylesheet.

FAQ

Can I add more than two color stops?

Yes. Click 'Add stop' to add additional color stops for more complex multi-color gradients.

What CSS property does it generate?

It outputs a background shorthand property like `background: linear-gradient(135deg, #ff7a18, #32d2ff);` ready to use in CSS.

Does it support transparent color stops?

The hex color picker doesn't support alpha transparency. For transparent stops, edit the CSS output directly.

Related Tools

Color Converter

Convert gradient stop colors between HEX, RGB, and HSL

Try it →

Random Palette Generator

Generate harmonious color palettes for your gradient stops

Try it →

WCAG Contrast Checker

Ensure text on gradient backgrounds meets accessibility standards

Try it →