littlekit.
Free. No account.
Tool reference

Gradient Generator: instructions, examples and limits

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

Open Gradient Generator
Processing location: your browser

This tool is registered for local processing. Its tool input is handled in the current page; LittleKit’s product analytics do not include the input value.

What it does

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

Worked example

90 degrees progresses from left to right.

The example demonstrates the operation. For file-based tools, results depend on the selected file and options.

How the result is produced

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

Important limits

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

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.

Colour PickerThe native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.

See a mismatch between these instructions and the tool? Report a correction with a non-sensitive example.