What is a CSS gradient?
A gradient isn't a color in CSS — it's an image. That's why it goes through background-image (or the background shorthand), never background-color. The browser interpolates the colors between stops on its own; you only supply each stop's color and the percentage where it sits. You can stack more than one gradient on the same property by separating them with commas — the top layer covers whatever sits underneath it, and transparent stops let you blend layers into one another.
Angle vs. type
linear-gradient angles run clockwise, with 0deg pointing up and 90deg pointing right — so 90deg and to right produce the same result. radial-gradient spreads outward from a center point: circle expands equally in every direction, while ellipsefollows the box's aspect ratio. conic-gradient instead sweeps colors around the center, which is how pie charts, color wheels, and conic glow effects get built. Placing two stops at the same percentage skips the smooth transition and produces a hard edge instead — that trick is what makes striped and checkerboard patterns possible.
Common mistakes
The most common one is fading a color into the transparent keyword: transparent actually means rgba(0, 0, 0, 0), so the middle of the transition comes out a muddy gray instead of a clean fade. Write the zero-alpha version of the same color instead, for example rgba(59, 130, 246, 0). The second common mistake is animating a gradient with transition; gradients aren't animatable by default, so the usual fix is scaling background-size up and shifting background-position instead. If a dead gray patch shows up between two contrasting colors, adding one extra stop in between is usually enough to fix it.
All three gradient types here have worked in every modern browser for years; conic-gradient is the newest and needs Safari 12.1 or later. Looking for ready-made backgrounds? Check the glassmorphism generator.