CSS Gradient Generator
Pick two colors and a direction — the preview and CSS code update as you go.
What this tool does
This tool builds a two-color CSS gradient — linear or radial — with a live preview, and
generates the matching background CSS declaration ready to paste into a stylesheet. Adjust
each color, where it starts and ends within the gradient, and the angle for linear gradients, and both
the preview and the generated code update immediately.
Example use case
Designing a hero section background, a button hover effect, or a card overlay that needs a smooth color transition instead of a flat fill. Rather than guessing at angle and stop-position values and reloading a browser to check, adjust the sliders here and copy the finished CSS directly into your project.
Linear vs. radial
A linear gradient transitions along a straight line at a chosen angle — 90° goes left to right, 180° goes top to bottom. A radial gradient transitions outward from the center in a circle, which works well for spotlight or vignette effects that a linear gradient can't produce.