littlekit.
Free. No account.

Gradient Generator

Creates a CSS linear-gradient between two colours at the supplied angle.

Your inputs stay in your browser. No account required.
Loading tool controls…

How Gradient Generator works

Creates a CSS linear-gradient between two colours at the supplied angle.

Try an example

90 degrees progresses from left to right.

Good to know

Two opaque stops only. Visual interpolation can differ by rendering environment.

Your privacy

Processing happens on this device for this tool. We do not upload your input, put it in share links or save it to your favourites. Closing this tab discards the working input; downloaded results remain wherever you save them.

When this tool is useful

Use Gradient Generator when you need a quick, local result and want the rule or limitation visible alongside it.

How to use it

  1. Enter the input using the labels shown.
  2. Run the operation and review the result.
  3. Download or copy the result only after checking it.

Checks before you rely on the result

  • Two opaque stops only. Visual interpolation can differ by rendering environment.
  • Keep the original input when the operation creates a new copy.
  • Use the related tools below when the next step needs a different format.

This page is maintained with the tool implementation and its deterministic tests. If the result looks wrong, report the issue with a non-sensitive example.

Read the Gradient Generator instructions

A useful next step

Colour Picker
Contrast Checker
HEX ↔ RGB
Made for clarity. Built to be useful.Report an issue