absurdtools

CSS Gradient Generator

Design linear and radial CSS gradients visually and copy the ready-to-use CSS.

How to use

  1. Choose linear or radial, then pick your two colors.
  2. Adjust the angle and watch the live preview.
  3. Copy the generated CSS into your stylesheet.

Frequently asked questions

What CSS does it output?

A standard background property using linear-gradient() or radial-gradient(), which works in every modern browser.

Can I use more than two colors?

This tool focuses on clean two-color gradients. You can extend the copied CSS with extra color stops if you need them.

🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.

Related tools

Box Shadow Generator

Create CSS box-shadow effects visually with a live preview and copyable code.

Text Shadow Generator

Design CSS text-shadow effects visually with a live preview and copyable code.

Border Radius Generator

Round element corners visually and copy the CSS border-radius, including fancy blob shapes.

Color Contrast Checker

Check the contrast ratio between two colors against WCAG accessibility standards.