What is a CSS Gradient?
A CSS gradient is a generated image that transitions smoothly between two or more colors. Because the browser generates it at render time, gradients scale perfectly to any element size without any asset to download. You apply them using the background or background-image property, using one of the gradient functions like linear-gradient() or radial-gradient().
CSS gradients are used everywhere in modern web design: hero section backgrounds, card overlays, button fills, progress bars, and decorative shapes. They are resolution-independent, require zero network requests, and can be combined with other background layers using comma-separated background-image values.
background: linear-gradient(135deg, #6366f1, #ec4899);Linear Gradients
A linear gradient progresses in a straight line from one color to another. The first argument defines the direction, either as an angle in degrees or as a keyword like to right or to bottom right. The remaining arguments are color stops.
background: linear-gradient(to right, #0ea5e9, #6366f1);background: linear-gradient(45deg, #f97316, #ec4899, #8b5cf6);The angle is measured clockwise from the top of the element. So 0deg goes from bottom to top, 90deg goes from left to right, and 180deg goes from top to bottom. The to right keyword is equivalent to 90deg.
Radial Gradients
A radial gradient radiates outward from a central point. Instead of an angle, you specify the shape (circle or ellipse) and optionally a position. The default position is the center of the element.
background: radial-gradient(circle at center, #a78bfa, #1e1b4b);background: radial-gradient(ellipse at top left, #fbbf24, #f59e0b, #d97706);Use circle when you want the gradient to spread out uniformly in all directions from the center point. Use ellipse when you want it to stretch to match the aspect ratio of the element. Radial gradients are great for spotlight effects, glows, and spotlight-style hero backgrounds.
Understanding Color Stops
Color stops are the individual colors in a gradient, along with their positions. Each stop tells the browser where that color is at its full strength. Between stops, the browser interpolates (blends) the colors.
Positions are expressed as percentages or lengths. If you omit positions, the browser spaces them evenly. You can place two stops at the same position to create a hard color edge with no blending:
background: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);background: linear-gradient(90deg, #0ea5e9 50%, #6366f1 50%);Hard stops are useful for split backgrounds, striped patterns, and flag-style dividers. Most gradient generators, including this one, create smooth transitions by default, but knowing about hard stops unlocks a whole class of purely CSS decorative techniques.
Practical Tips for Better Gradients
- Add a fallback background color. Declare a solid
background-colorbefore the gradient in case of very old browsers or for email clients that do not support CSS gradients. - Stack gradients for texture. You can layer multiple gradient images in a single
background-imagedeclaration separated by commas, combining them with opacity to create complex backgrounds. - Use transparent stops for overlays. A gradient from a color to
transparentlayered over a photo creates a natural fade effect for text legibility on image elements. - Avoid pure black in gradients. A pure
#000000totransparentgradient often looks muddy or gray in the middle. Use a very dark saturated color instead of pure black for a richer fade. - Use
background-sizefor patterns. Combining a gradient with a small background-size value lets you create repeating striped or checkerboard patterns without any images or extra elements.
Frequently Asked Questions
Can I animate a CSS gradient?
Direct animation of gradient color values is not supported in all browsers because gradients are treated as images, not values that can be easily interpolated. The common workaround is to animate the background-position on a larger gradient background, creating the illusion of a flowing gradient. You can also layer a semi-transparent colored element and animate its opacity to simulate a color change.
What is the difference between background and background-image?
The background shorthand includes background-image, background-color, background-position, and more. When you write background: linear-gradient(...), the browser treats that as setting background-image. Explicitly using background-image lets you keep a separate background-color for fallback without the shorthand resetting it.
How do I make a gradient with transparency?
Use colors with an alpha channel: rgba(), hsla(), or modern hex with alpha like #6366f180. Using the keyword transparent is convenient but can cause unexpected gray banding in some browsers when used with colored stops. The safer approach is to use the same color with zero alpha, like rgba(99, 102, 241, 0).
What is a conic gradient?
A conic gradient sweeps around a center point rather than radiating outward or running in a line. It is used for pie charts, color wheels, and starburst effects using the conic-gradient() function. Browser support is strong in modern browsers and it works the same way as linear and radial gradients, with color stops defined as angles instead of lengths.