Gradient Generator
Web & SEO Tools
Generate CSS gradients
background: linear-gradient(45deg, #22c55e, #3b82f6);
How to Use
- Choose two colors
- Select gradient direction
- Copy CSS code
Example / Use Case
Create Gradient Background for Hero Section
A web designer creates a modern hero section background with a purple-to-blue gradient for a SaaS landing page.
Input
Type: Linear | Colors: #667eea to #764ba2 | Angle: 135 degrees
Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
How It Works
CSS gradients are images created with the gradient() function that show smooth transitions between colors. Linear gradients use the syntax: linear-gradient(direction, color-stop1, color-stop2, ...). Direction can be an angle (0-360deg) or keywords (to bottom, to right, etc.). Color stops define where each color appears along the gradient line, using percentages or pixel values. Radial gradients use: radial-gradient(shape at position, color-stops) where shape can be circle or ellipse. You can create complex effects by adding multiple color stops with different positions. For more CSS tools, check our Button Generator and Box Shadow Generator.
How to Use
- 1Choose gradient type: linear (straight) or radial (circular)
- 2Click the color stops to add or change colors (minimum 2 required)
- 3Set the direction angle for linear gradients (or select preset directions)
- 4Adjust color positions using percentage sliders
- 5Preview the gradient in real-time
- 6Copy the generated CSS code and paste into your stylesheet
Frequently Asked Questions
The tool generates standard CSS gradient syntax: linear-gradient(angle, color-stop1, color-stop2) or radial-gradient(shape, color-stops).