CSS Gradient Generator

Build a CSS Gradient With a Live Preview

Color 1

Color 2

Type

Angle: 90°

Generated CSS

Adjust the controls above to build a gradient

Error

Something went wrong.

Understanding CSS Gradients

Live Preview

See your gradient update instantly as you change colors, type, or angle, with no page reload.

Linear & Radial

Build a directional linear gradient at any angle, or a radial gradient that spreads outward from the center.

Copy-Ready CSS

Copy the exact background CSS declaration to paste directly into your stylesheet.

Local Processing

The preview and CSS are generated entirely in your browser — no data is ever sent to a server.

Linear vs. Radial Gradients

A linear gradient transitions colors along a straight line at a chosen angle, useful for backgrounds, buttons, and banners. A radial gradient instead transitions colors outward from a center point in a circular pattern, which works well for spotlight effects, badges, or circular UI elements.

Key Takeaways

Two Gradient Types: Choose linear (angled) or radial (circular) gradients.
Adjustable Angle: Fine-tune the direction of linear gradients from 0 to 360 degrees.
Client-Side Only: All generation happens locally in your browser — no data is ever sent to a server.

CSS Gradient Generator - Free Online Tool