Colors

CSS Gradient Generator

Generate a two-color linear-gradient declaration with validated colors, angle, and stop positions.

✓ Browser-local processing

Result

Loading tool…

How to use CSS Gradient Generator

Create a small, predictable CSS gradient without hand-typing function syntax. Colors are normalized to opaque HEX and numeric inputs are bounded before the declaration is produced.

Choose two opaque colors, an angle, and ordered percentage stops.
Select Run tool to generate a linear-gradient CSS declaration.
Review the result, then copy it or download the generated file.

Good to know

Two-color linear gradients only; no radial/conic/repeating mode or transparency.
Output is CSS text, not an image. Browser color interpolation and rendering affect the final appearance; inspect it in the target design.

Common questions

What does 90 degrees mean?

In CSS linear gradients, 0 degrees points upward and 90 degrees points to the right.

Keep going with related tools

All colors →

Colors

Color Converter

Convert opaque sRGB colors between HEX, integer RGB, and HSL representations.

Colors

Color Contrast Checker

Calculate WCAG sRGB contrast and report AA/AAA text thresholds for two opaque colors.

Developer

CSS Selector Specificity Analyzer

Calculate selector specificity tuples, including supported functional selector rules.

Developer

CSS Formatter and Minifier

Format a CSS stylesheet or serialize its syntax tree with compact token spacing.

Colors

CSS Box Shadow Generator

Build validated multi-layer box-shadow CSS from explicit layer values.

Colors

Palette File Workbench

Read GIMP GPL/JSON swatches and export ordered GPL, JSON or escaped CSS variables.