Color / Gradient

CSS gradient generator

Two stops, live preview, copy CSS. Runs here.

Last checked: September 2026. Confirm millimetres, pixels, and KB on the official form. Not a government website.

0 uploads. Color math stays in this tab.

Second stop

background: linear-gradient(90deg, #F2013F, #221F1F);

Copy as CSS / Tailwind / Swift / Android

--color: #F2013F;
--color-rgb: 242 1 63;
--color-hsl: 345 99% 48%;

{
  "50": "#29000b",
  "100": "#530016",
  "200": "#7e0121",
  "300": "#a9012c",
  "400": "#d30137",
  "500": "#fe0142",
  "600": "#fe2c62",
  "700": "#fe5682",
  "800": "#fe81a1",
  "900": "#ffacc1",
  "950": "#ffd6e1"
}

UIColor(red: 0.949, green: 0.004, blue: 0.247, alpha: 1)

0xFFF2013F

Color blindness simulation (approx)

Drop

Drop the file. It stays in this browser tab.

Preset applied

Set the cap or preset for this job.

Download

Download from this device. Nothing is uploaded.

FAQ

Questions, answered

Mesh?Open

Linear two-stop only.

Is anything uploaded?Open

No. This tool runs in your browser tab. Close it and the data is gone.

Related systems

Continue in the suite

01 / color

Color Picker

Eyedrop from the screen or an image. HEX, RGB, HSL, HSV, CMYK (approx), OKLCH. File stays on this device.

02 / color

HEX to RGB

Paste #F2013F and get RGB, HSL, HSV, approximate CMYK, and OKLCH. No upload.

03 / color

Color Palette from Image

Samples pixels in this tab. Complementary, analogous, monochrome, Tailwind-like scale.