What are CSS gradients?
CSS gradients allow you to display smooth transitions between two or more specified colors. Rather than using an image file, gradients are rendered by the browser itself, resulting in sharp visuals at any resolution and smaller page sizes. They are defined using the background or background-image CSS property.
Linear vs radial gradients
A linear gradient transitions colors along a straight line at a specified angle — 0° goes from bottom to top, 90° goes from left to right, and 135° goes diagonally from top-left to bottom-right. A radial gradient radiates outward from a center point in a circular or elliptical shape, making it great for spotlight and vignette effects.
How to use gradients in CSS
Copy the generated CSS and paste it directly into your stylesheet. For example: background: linear-gradient(135deg, #2563eb, #7c3aed);. You can apply gradients to any element that accepts a background, including div, header, button, and even body. Gradients can also be layered with other backgrounds using comma-separated values.
Tips and tricks
Use complementary colors (opposite on the color wheel) for vibrant gradients, or analogous colors (adjacent on the wheel) for subtle, harmonious transitions. For text effects, apply a gradient with background-clip: text and -webkit-background-clip: text alongside color: transparent. Always test contrast ratios when placing text on gradient backgrounds to ensure accessibility.