CSS Gradient Guide: Linear, Radial, and Conic Explained
CSS gradients allow you to transition smoothly between two or more colors without using any image files, keeping your pages fast and fully scalable at any screen resolution. Yet many developers stick to simple two-color linear gradients because the full specification feels overwhelming. This guide breaks down every gradient type — linear, radial, and conic — explains the syntax clearly, and shows practical examples you can adapt right away using a visual CSS gradient generator.
Linear Gradients: Direction, Angle, and Color Stops
The linear gradient is the most common and most versatile gradient in CSS. Its syntax is `linear-gradient(direction, color-stop-1, color-stop-2, ...)`. The direction can be expressed as a keyword (`to right`, `to bottom left`) or as an angle in degrees. Angles follow a clockwise convention starting from the top: 0deg means the gradient flows upward (from bottom to top), 90deg flows left to right, 180deg flows top to bottom, and 270deg flows right to left. Diagonal values like 45deg and 135deg are popular because they add dynamism to otherwise flat layouts. Color stops are the individual colors along the gradient line, each optionally followed by a position value. `linear-gradient(to right, red 0%, blue 100%)` is a simple two-stop red-to-blue sweep. Adding a third stop like `linear-gradient(to right, red 0%, yellow 50%, blue 100%)` creates a sunset effect. You can also set a hard stop by placing two color stops at the same position: `linear-gradient(to right, red 50%, blue 50%)` produces an instant color change at the midpoint — useful for split-screen designs. The optional hint value between two stops controls the midpoint of the transition. `linear-gradient(to right, red, 30%, blue)` pushes the blending midpoint to the 30% mark, making the red side larger and the blue side smaller. This subtle feature gives you much finer control over the visual weight of each color in the blend. For repeating stripes, use `repeating-linear-gradient`. By specifying stops with fixed pixel or em values rather than percentages, you create a pattern that tiles across the entire element: `repeating-linear-gradient(45deg, #ccc 0px, #ccc 10px, transparent 10px, transparent 20px)` makes a diagonal stripe pattern.
Radial Gradients: Shape, Size, and Position
Radial gradients radiate outward from a center point, fading from the focal color to the outer color (or transparent). The syntax is `radial-gradient(shape size at position, color-stop-1, color-stop-2, ...)`. Shape can be `circle` for a perfectly round gradient or `ellipse` for one that stretches to fit the element's aspect ratio. When you don't specify a shape, the browser defaults to `ellipse`. Size controls how far the gradient extends before it reaches its last color stop. The four keyword options are: `closest-side` (gradient ends where the closest edge is), `farthest-side`, `closest-corner`, and `farthest-corner` (the default). `farthest-corner` is what you want for a full-element glow. `closest-side` can create a tighter, more focused spotlight. The `at position` part moves the focal point. `radial-gradient(circle at top left, white, transparent)` places a bright corner glow. `radial-gradient(circle at 30% 70%, blue, purple)` shifts the center to the lower-left third of the element, which is a common technique for hero-section lighting effects. Radial gradients stack beautifully. By comma-separating multiple radial gradients on the `background-image` property, you can create starfield backgrounds (many small white circles at different positions), bokeh effects, or subtle ambient lighting that appears to come from multiple sources. Each gradient layer composites over the layers below it, so ordering matters.
Conic Gradients: The CSS Color Wheel
Conic gradients are the newest addition to the CSS gradient family and the least used, but they unlock design possibilities unavailable with the other two types. A conic gradient sweeps color around a central point rather than flowing in a line or radiating outward. The syntax is `conic-gradient(from angle at position, color-stop-1, color-stop-2, ...)`. The most immediately recognizable use case is a pie or donut chart rendered entirely in CSS. `conic-gradient(red 0% 40%, blue 40% 70%, green 70% 100%)` creates a three-segment pie. Pair it with `border-radius: 50%` on a square element and you have a chart with zero JavaScript and zero images. Conic gradients are also the natural choice for a full-spectrum color wheel: `conic-gradient(red, yellow, lime, cyan, blue, magenta, red)` — the color picker in most design tools uses exactly this approach. It is also useful for starburst backgrounds, halo effects, and radial progress indicators. The `from` angle parameter rotates the starting point of the sweep. `conic-gradient(from 90deg, ...)` starts the first color at the 3-o'clock position (right side) rather than the top. The `at position` parameter, just like in radial gradients, moves the central axis away from the element's center. Browser support for conic gradients covers all evergreen browsers released after 2021. If you need to support older environments, provide a `background-color` fallback before the `background-image` conic gradient declaration — older browsers will ignore the gradient line and show only the solid color.
Practical Tips for Production-Ready Gradients
Designing gradients that look great in a generator preview does not always guarantee they will look great in context on a live web page. Here are the most important practical tips for turning your generator output into polished production code. Avoid pure black or pure white as gradient endpoints. Pure black (#000000) and pure white (#ffffff) at full opacity tend to look flat and harsh. Instead, use very dark navy (#0a0a1a) or very light cream (#f8f8f0) as your anchors. This adds warmth or coolness that makes gradients feel designed rather than default. Use the perceptual lightness trick for natural-looking transitions. When blending a light color to a dark one, the midpoint in sRGB color space often appears muddy or desaturated. Running your gradient through the OKLCH or HSL color space — which some CSS gradient generators now support — keeps the blend vibrant throughout its range. Test your gradients against real content. A gradient that looks beautiful on a blank canvas can make text illegible when body copy sits on top. Ensure sufficient contrast between your text color and every point along the gradient, not just the endpoints. WCAG guidelines require at least a 4.5:1 contrast ratio for normal text. Define gradients as CSS variables for maintainability. Store each gradient in a `--variable-name` at `:root` and reference it wherever needed. When brand colors change, you update one variable rather than hunting through your entire stylesheet. Finally, use a CSS gradient generator to prototype before writing code. Visual iteration is ten times faster than text editing for color-sensitive work. Generate the gradient visually, copy the CSS output, then paste it into your codebase — you keep all the benefits of hand-written code with none of the guesswork.
Frequently Asked Questions
- What is the difference between background and background-image for gradients?
- Both properties accept gradient values and produce identical visual results. Using `background-image` is slightly more explicit because gradients are technically image values. Using the shorthand `background` is more common and also works, but be aware that it resets other background sub-properties like `background-color`, `background-size`, and `background-repeat` to their defaults unless you also specify them in the same declaration.
- How many color stops can a CSS gradient have?
- The CSS specification does not impose a hard limit on the number of color stops in a gradient. In practice, browser rendering engines handle dozens of stops without performance issues. However, visual complexity tends to plateau after six or seven stops — beyond that, the human eye struggles to distinguish individual color transitions. For complex multi-color designs, consider using a mesh gradient or a layered approach with multiple overlapping gradients instead.
- Can CSS gradients replace background images for performance?
- Yes, in most cases CSS gradients are significantly lighter than background images. A CSS gradient rule is a few bytes of text, whereas a comparable JPEG or PNG background image can be tens or hundreds of kilobytes. Gradients also scale perfectly to any screen resolution without quality loss and do not require an HTTP request. For backgrounds that do not need photographic detail, replacing images with CSS gradients is one of the easiest performance wins available.