CSS Gradient Generator
Create beautiful CSS gradients for your web projects with this easy-to-use generator.
Gradient Type
Direction
deg
Color Stops
CSS Code
background: linear-gradient(180deg, #4F46E5 0%, #EC4899 100%);
About CSS Gradients
CSS gradients allow you to display smooth transitions between two or more specified colors. They are often used for backgrounds, buttons, and other UI elements to create depth and visual interest.
Types of Gradients
- Linear Gradients: Colors flow in a straight line along a specified direction.
- Radial Gradients: Colors radiate from a central point in a circular or elliptical pattern.
- Conic Gradients: Colors rotate around a center point (like a color wheel).
Browser Support
Modern browsers support all three types of gradients. For older browsers, consider using fallback colors or alternative styling.
Privacy Note
All gradient generation is done locally in your browser. Your color choices and gradient settings are never sent to our servers.