ToolPuma Logo

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

90°
0%
50%
100%

What Is a CSS Gradient Generator?

The CSS Gradient Generator is a full-featured studio for building linear and radial gradients with multiple color stops. Add, position, and recolor any number of stops, choose between linear and radial modes, and watch the live preview update as you work. It outputs clean CSS syntax compatible with every modern browser, including the exact color-stop percentages.

How to Use This CSS Gradient Generator

  1. 1
    Choose Linear or Radial gradient type.
  2. 2
    Add or remove color stops with the + Add Stop button.
  3. 3
    Adjust each stop's color and position percentage with the sliders.
  4. 4
    Copy the generated CSS background declaration.

Frequently Asked Questions

A color stop is a color placed at a specific position along the gradient line. Stops between 0% and 100% define where each color is solid and where blending to the next color begins.
Linear gradients blend colors along a straight line in a chosen direction. Radial gradients blend colors outward from a central point in circles or ellipses.
This tool supports up to eight stops, which is enough for smooth and complex transitions. Modern browsers support far more, but excess stops rarely add visual value.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

CSS Border Generator

Style borders with width, style, color, and radius.

More Color & Design Tools

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.

Color Contrast Checker

Check the contrast ratio between two colors.