CSS Gradient Generator
Create beautiful CSS gradients visually. Customize colors, angles, and positions with a live preview.
Gradient Settings
Angle (90°)
0°
90°
180°
270°
Color Stops
Position (0%)
Position (100%)
Preview
CSS Code
CSS Gradient Generator
The CSS Gradient Generator is a visual tool that helps you create stunning linear and radial gradients for your website backgrounds.
Understanding Gradients
- Linear Gradient: Colors transition in a straight line. You can control the direction using the angle (e.g., 90deg goes from left to right).
- Radial Gradient: Colors radiate outwards from a central point, creating a circular or elliptical effect.
- Color Stops: Specific points along the gradient line where a color is defined. The browser automatically blends the colors between these stops.
CSS Syntax
The generated code uses the standard linear-gradient() and radial-gradient() CSS functions, which are supported by all modern browsers.