Understanding CSS Gradients
A CSS gradient is a smooth transition between two or more colors, rendered by the browser as an image. Because it is generated rather than downloaded, a gradient background costs no extra HTTP request and scales perfectly to any size — which is why gradients replaced background images for most UI surfaces.
Gradient Syntax
Linear: background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%); — the angle sets the direction, then each color is paired with a position along that line.
Radial: background: radial-gradient(circle at center, #f9d423 0%, #ff4e50 100%); — colors radiate outward from a center point you choose.
Understanding the Angle
In CSS, gradient angles point toward where the gradient ends. 0deg runs bottom to top, 90deg runs left to right, 180deg runs top to bottom, and 270deg runs right to left. The widely used 135deg creates the diagonal top-left to bottom-right blend seen across modern web design.
Tips for Better Gradients
Gradients look best when the colors sit close together on the color wheel — wildly different hues tend to pass through a muddy grey in the middle. Keeping saturation and brightness roughly consistent across stops avoids visible banding. For text placed over a gradient, always check contrast against the lightest part of the gradient, not just the average.
Gradient Text Effect
To apply a gradient to text rather than a box, set the gradient as the element's background, then add background-clip: text, -webkit-background-clip: text, and color: transparent. The gradient then shows through the letterforms.