Gradient Generator
Create CSS linear and radial gradients with a visual editor.
background: linear-gradient(135deg, #2563eb, #7c3aed);
How to Use the CSS Gradient Generator
Pick two colors using the color pickers, choose between linear and radial gradient types, and adjust the angle for linear gradients. The preview updates in real time. Click "Copy CSS" to get the CSS code.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, created purely with CSS — no images needed.
What is the difference between linear and radial?
Linear gradients transition along a straight line at a given angle. Radial gradients transition outward from a center point in a circular shape.
Can I add more than two colors?
CSS supports multiple color stops. This tool generates two-color gradients. For more stops, add additional colors to the generated CSS manually.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur.
Open tool →