العربية

CSS gradient generator

Create a linear or circular radial gradient from explicit colors and positions, with a preview and CSS download.

Numbers: 0–9, ٠–٩ or ۰–۹, with a decimal point or ٫. No exponents or grouping separators. Local processing without uploads or automatic storage. Output up to 16 KiB.

2–8 HEX stops with 3, 4, 6 or 8 digits; ascending positions 0–100, with equal positions allowed for a hard edge. Angle −360 to 360; center 0–100. Up to 3 decimal places. No images or repeating gradients; radial uses a circle to the farthest corner.

Color stop 1
Color stop 2

How to use

Choose linear or radial and set the angle or center. Enter colors and positions; add, remove or move stops as needed. Generate, inspect the preview, then copy or download the CSS.

Try an example

Angle 90 with #ff0000 at 0% and #0000ff at 100% produces linear-gradient(90deg, #ff0000 0%, #0000ff 100%): red on the left and blue on the right.

Support & limits

CSS angle 0 points upward and 90 points right. Radial uses a farthest-corner circle; images, repeating gradients and color-space selection are outside scope. Equal positions create a hard edge; descending positions are rejected instead of reordered. Short HEX expands to 6 or 8 digits; the last two digits of the 8-digit form specify alpha. A preview on the page background does not certify contrast or identical colors on every display.

Common questions

Is the download a PNG image?

No. The CSS file contains a .gradient rule. Apply that class to an element on your page; the tool does not export an image or accept arbitrary CSS.

Related tools

Color format converter

Convert a color between HEX, RGB and HSL, including alpha, with a validated preview.

Color contrast checker

Calculate the contrast of two opaque colors and WCAG 2.2 AA/AAA text thresholds.

CSS shadow generator

Compose inset or outer box-shadow layers with a preview and CSS you can copy or download.