CSS Linear Gradient Generator
Design beautiful linear gradients visually and get production-ready CSS code instantly. Pick colors, adjust direction and stops, and preview in real time — all client-side.
CSS Gradient Generator
Create beautiful CSS gradients visually. Adjust colors, stops, angles, and copy the CSS.
Color Stops (2)
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Presets
About CSS Gradients
Linear gradients transition colors along a straight line defined by an angle.0deggoes upward, 90deggoes right, 180deggoes downward.
Radial gradients radiate outward from a center point. Choose between circle(equal radius) and ellipse(stretches to fit the element).
Color stops define where each color appears along the gradient (0% = start, 100% = end). Add more stops for complex multi-color gradients.
What is a CSS linear gradient?
A CSS linear gradient creates a smooth transition between two or more colors along a straight line. Defined with the linear-gradient() function, you specify a direction (angle or keywords like 'to right') and color stops. Linear gradients are the most commonly used gradient type in web design, appearing in backgrounds, buttons, hero sections, and overlays.
Common use cases
Linear gradients are used for hero section backgrounds, button hover effects, text gradient overlays, progress bars, and decorative dividers. They can create depth and visual interest without loading image files, improving page performance. Multi-stop linear gradients can produce stripe patterns, color bands, and other creative effects.
Frequently Asked Questions
How do I set the direction of a CSS linear gradient?
Use an angle (e.g., 45deg, 180deg) or a keyword direction (e.g., 'to right', 'to bottom left'). An angle of 0deg points upward, 90deg points right, and 180deg (the default) points downward.
Are CSS linear gradients supported in all browsers?
Yes. CSS linear-gradient() is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.