Skip to content
UtilKit

Gradient Generator

Type

°

Color stops

%

%

Preview

CSS

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

How to use

  1. 1.

    Choose Linear or Radial, and for Linear drag or type the Angle

  2. 2.

    Set each stop color by clicking its swatch or typing a hex, rgb() or hsl() value, and give it a Position from 0 to 100%

  3. 3.

    Click Add stop for more colors (the trash icon removes one), then click Copy in the CSS panel

Common uses

  • ▸

    Hero sections and full-page backgrounds

  • ▸

    Gradient fills for buttons, cards and headers

  • ▸

    Soft radial glows behind a logo or image

  • ▸

    Trying color combinations visually before writing any CSS

Similar tools

Box Shadow Generator
Color Palette Generator

Frequently asked questions

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at the angle you set. A radial gradient spreads outward from the center, so the Angle is disabled for it. This tool writes circular radial gradients (radial-gradient(circle, ...)); for an ellipse, replace circle with ellipse in the copied CSS.

What units does the angle use?

Degrees, from 0 to 360, with the standard CSS meaning: 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. The default, 135deg, points down and to the right.

Can I add more than two color stops?

Yes - click Add stop to insert a new color stop. It is placed in the middle of the widest gap between the existing stops (counting the 0% and 100% ends), and you can then change its color and position. To remove a stop, click the trash icon beside it; a gradient needs at least two, so the icon appears once there are three or more.

What does the copied CSS look like?

A complete background declaration with the stops in position order, e.g. background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); - ready to paste into a CSS rule. Stop colors are always written as hex, so an rgb() or hsl() value you type is converted. The stops can be edited in any order; only the CSS is sorted.

Is my data sent to a server?

No. All gradient generation runs in your browser, and no data is sent anywhere.