A CSS gradient is a smooth transition between two or more colors, generated entirely in code — no image file, no download, no HTTP request. Gradients are lighter than background images, scale to any screen size without pixelation, and can be animated. They're the simplest way to add visual depth to a page without adding weight.
The three gradient types
- Linear gradient — colors transition along a straight line (top to bottom, left to right, or at any angle). Use for hero sections, buttons, cards, and any surface where you want a subtle color shift.
- Radial gradient — colors radiate outward from a center point (circle or ellipse). Use for spotlight effects, hover states, and backgrounds where the focus is in the middle.
- Conic gradient — colors rotate around a center point like a color wheel. Use for pie charts, loading spinners, and decorative elements where the transition follows a circular path.
Linear gradients in practice
The most common gradient is a simple top-to-bottom linear gradient: background: linear-gradient(to bottom, #667eea, #764ba2). This transitions from a blue-purple at the top to a deeper purple at the bottom — a subtle, professional look that works for hero sections, card backgrounds, and buttons. The angle can be adjusted (45deg, 135deg, etc.) to create diagonal transitions.
When gradients help vs hurt
- Help: Hero sections (subtle gradient adds depth without distraction), buttons (gradient makes them more tappable), cards (gradient background differentiates from flat content).
- Hurt: Large areas with high-contrast gradients (distracting and hard to read text over), gradients with more than 3 colors (becomes muddy), gradients on text (usually poor readability unless carefully designed).
- Rule of thumb: use gradients at low opacity or with colors that are close together on the color wheel. The best gradients are the ones users don't consciously notice.
Text readability over gradients
When placing text over a gradient, ensure sufficient contrast at every point along the gradient. A gradient from light blue to dark blue might have great contrast at the dark end but poor contrast at the light end. Test with a contrast checker at both extremes.
Exporting for different frameworks
A gradient defined in CSS can be exported as standard CSS, SCSS, Tailwind CSS arbitrary values, React inline styles, or CSS custom properties — depending on your project's stack. The gradient itself is the same; only the syntax wrapper changes. Build it visually, then copy the format you need.
Build gradients visually
ForgePlug's CSS Gradient Generator creates linear, radial, and conic gradients with live preview, 100+ presets, and export to CSS, SCSS, Tailwind, React, and more.
Open CSS Gradient Generator