b2KIT

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

How to Use CSS Gradient Generator

  1. 1

    Choose gradient type

    Select linear, radial, or conic gradient style.

  2. 2

    Set color stops

    Add colors and adjust their positions along the gradient.

  3. 3

    Adjust the angle

    Rotate or reposition the gradient direction as needed.

  4. 4

    Copy the CSS

    Click copy to grab the gradient CSS for your stylesheet.

Tested tool guide Design and color tools Checked July 30, 2026

What CSS Gradient Generator does, with a checked example

The gradient editor produces a live CSS background from ordered color stops. Linear and conic gradients accept an angle; radial gradients accept a circle or ellipse shape. Stops can be added, removed, recolored, and repositioned before copying either the gradient value or a complete background declaration.

Worked example

A concrete input and expected output from the current implementation.

Input

Linear, 90 degrees, #C49000 at 0%, #111117 at 100%

Expected output

background: linear-gradient(90deg, #C49000 0%, #111117 100%);

The first color begins at the left side for this angle and interpolates through sRGB toward the final dark color.

How the result is produced

1

Stops are sorted by position

The generated declaration orders stops from 0 through 100 percent even if the controls were edited in another sequence. At least two stops are retained.

2

Gradient type changes the coordinate system

Linear gradients follow an axis, radial gradients expand from a center, and conic gradients rotate around a center point. The same stops can therefore produce very different visual transitions.

Good uses

  • Prototype a background before adding it to a stylesheet.
  • Compare two- and three-stop brand treatments.
  • Create a conic color-wheel or progress background.

Limits and checks

  • Text contrast must be checked across every relevant part of a gradient.
  • Closely spaced stops can create sharp bands instead of a smooth blend.
  • Printed and wide-gamut output can differ from an sRGB browser preview.

Common questions

What does the percentage after a color mean?

It locates that color stop along the gradient line or path. The browser interpolates colors between neighboring stops.

Why does changing the angle appear to reverse a gradient?

CSS gradient angles define direction in a coordinate system. Moving from 90 to 270 degrees points the gradient axis the opposite way.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.

Box Shadow CSS Generator

Design box shadows visually with multiple layers and copy the CSS code.