← Back to Colour Tools

CSS Gradient Generator

Build linear or radial gradients with custom colour stops and direction. Instantly copy the CSS to use in any project.

Type

Direction

deg

Colour stops

%
%

CSS output

background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);

Preview on text

Gradient text preview

How to use

  1. Choose Linear or Radial gradient type.
  2. Select a direction preset or enter a custom angle (linear only).
  3. Edit colour stops — change the colour or position, add more stops, or remove them.
  4. Copy the generated CSS and paste it into your stylesheet.

Everything runs in your browser — no data is sent to any server.