CSS Gradient Generator
Create beautiful CSS gradients visually with live preview.
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);What is a CSS Gradient?
CSS gradients let you display smooth transitions between two or more specified colors. They are commonly used for backgrounds, buttons, and decorative elements. Linear gradients flow in a straight line at any angle, while radial gradients radiate from a center point.
How to Use
Pick your gradient type (linear or radial), adjust the angle for linear gradients, choose your colors and their positions, then copy the generated CSS code. You can add up to 6 color stops for complex gradients, or start from one of the built-in presets.