CSS Gradient Generator
Create linear or radial CSS gradients with a live preview and copy the code.
Generated CSS
background: linear-gradient(135deg, #00875a 0%, #00c896 100%);How a CSS gradient works
A gradient creates a background image between colors. Choose linear-gradient for a defined direction or radial-gradient to expand color from the center.
Angles and color stops
In a linear gradient, 0 degrees points up and 90 degrees points right. Stop positions define where each color transition begins or ends.
Using the generated CSS
Copy the background declaration and apply it to any element that accepts a background image.
Explore all web development tools