Create CSS Gradients Online

You can create both linear and radial gradients. Linear gradients support full 0–360° angles, while radial gradients are centered circles that work well for spotlight effects and hero backgrounds.

The tool supports between two and five stops. This range keeps gradients smooth and practical for real interfaces while still giving you enough control for expressive designs.

Yes. Each stop has an alpha slider and A field so you can fade gradients into solid backgrounds, create overlays, or layer gradients on top of images without harsh edges.

Modern browsers understand standard linear-gradient and radial-gradient syntax out of the box. If you need extra safety for older engines, enable the Max compatibility (IE6+) toggle. The CSS block will then include a solid fallback color plus -webkit-, -moz- and -o- prefixed background lines so gradients degrade gracefully when full support is not available.

Copy the generated background declarations and paste them where your framework expects raw CSS. In Tailwind you can add a custom entry under theme.extend.backgroundImage (for example 'hero': 'linear-gradient(...)') or use an arbitrary value like bg-[linear-gradient(...)]. In React, Vue or other component systems, drop the same value into inline styles or CSS modules, and optionally run it through the CSS Formatter when you want to keep your styles consistent with the rest of your project.