CSS Gradient Generator

Visual UI to design beautiful backgrounds, outputting perfect CSS gradient code.

Settings

Style

Color 1

Color 2

Angle135°

CSS Code

/* Fallback background */
background: #4f46e5;

/* Gradient background */

How to use the Generator

Select your two keyframe colors and an angle. Switch between linear or radial styles to see a live preview. Once your design is complete, simply click "Copy to Clipboard" to instantly grab the precise CSS code required to recreate the background in your codebase.