CSS Gradient Generator

Create beautiful CSS gradients

The CSS Gradient Generator helps you build smooth linear and radial gradients with custom colors and an adjustable angle. A live preview shows exactly how the gradient looks, and the ready-to-use CSS is one click away. It is the fastest way to add depth and color to backgrounds, buttons, and hero sections.

Linear vs radial gradients

A linear gradient transitions colors along a straight line, with the direction set by an angle — 0° goes bottom to top, 90° left to right, and so on. A radial gradient transitions outward from a center point in a circle or ellipse. Linear gradients are the workhorse for backgrounds and buttons; radial gradients are great for spotlights, glows, and soft focal points.

How to use it

1. Choose linear or radial.
2. Pick your two colors.
3. For linear, set the angle.
4. Copy the generated background CSS into your stylesheet.

Common gradient angles

Angle	Direction
0deg	Bottom to top
90deg	Left to right
180deg	Top to bottom
135deg	Top-left to bottom-right

Tips for great gradients

• Use close hues for a subtle, professional look; far-apart hues for bold, vibrant ones.
• Diagonal angles (like 120°–135°) often look more dynamic than flat horizontal ones.
• Pair with text carefully — check contrast so overlaid text stays readable.
• Reuse your gradient as a brand accent across buttons and headings for consistency.

Where gradients work best

Gradients add life to hero sections, call-to-action buttons, cards, and section dividers. A tasteful gradient background can make a flat design feel modern and premium. Because the generated CSS is a single background declaration, dropping it into your stylesheet is effortless.

Private and free

The generator runs entirely in your browser with a live preview, no sign-up, and no limits — design as many gradients as you like, free.