How to Create CSS Gradients
CSS gradients let you create smooth color transitions without image files. They are lighter than images, scale perfectly to any screen size, and are easy to customize.
Types of CSS gradients
Linear gradient — colors transition in a straight line (top to bottom, left to right, or any angle).
background: linear-gradient(135deg, #667eea, #764ba2);
Radial gradient — colors radiate outward from a center point in a circular or elliptical pattern.
background: radial-gradient(circle, #667eea, #764ba2);
Conic gradient — colors rotate around a center point, like a color wheel.
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
How to create gradients visually
- Select the gradient type — choose linear or radial and set the angle or position.
- Add color stops — click to add colors at different positions along the gradient. Adjust each color and its position.
- Copy the CSS — copy the generated code and paste it into your stylesheet.
Using a visual generator is faster than writing gradient syntax by hand, especially when you are experimenting with multiple color stops.
Common gradient patterns
Hero section background — a subtle two-color gradient adds depth without distracting from text.
background: linear-gradient(135deg, #0f172a, #1e3a5f);
Button highlight — a slight gradient makes buttons feel three-dimensional.
background: linear-gradient(180deg, #3b82f6, #2563eb);
Overlay on images — a gradient overlay improves text readability over photos.
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
Accent border — use a gradient as a border for visual interest.
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
Tips
- Keep it subtle — the best gradients are barely noticeable. A slight shift between two similar colors adds depth. Dramatic rainbow gradients rarely look professional.
- Use gradients instead of images — a CSS gradient loads instantly with zero network requests. Replace decorative background images with gradients where possible.
- Test in dark mode — gradients that look great on a light background may wash out or clash in dark mode. Consider defining different gradients for each theme.
- Mind the text contrast — if you are placing text over a gradient, check that the text is readable across the entire gradient range, not just the lightest or darkest part.
Frequently Asked Questions
Do CSS gradients work in all browsers?
Yes. Linear and radial gradients are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Conic gradients have slightly less support but work in all current browser versions.
Can I use more than two colors?
Yes. CSS gradients support as many color stops as you want. Each stop defines a color and a position along the gradient.
Do gradients affect page performance?
No. CSS gradients are rendered by the browser and are much lighter than image files. They scale perfectly to any screen size with zero additional download.
Can I animate a gradient?
Not directly with a CSS transition on the gradient property, but you can animate the background-position or use CSS custom properties with @property to create smooth gradient animations.