Craft complex linear and radial gradients with surgical precision. Copy production-ready CSS code optimized for all modern browsers.
background: rgb(0,74,198);
background: linear-gradient(135deg,
rgba(0,74,198,1) 0%,
rgba(73,92,149,1) 100%
);CSS supports three gradient types. Linear gradientstransition colors along a straight line at any angle — 0deg goes bottom-to-top, 90deg goes left-to-right, and 135deg creates the classic diagonal. Radial gradients radiate from a center point outward in an elliptical or circular shape, perfect for spotlight effects and glowing orbs. Conic gradients sweep colors around a center point like a color wheel, enabling pie charts, gauges, and rainbow effects with pure CSS.
Each color stop can have an explicit position (percentage or length). Without positions, colors are evenly distributed. Adding a second position creates a hard stop: linear-gradient(red 50%, blue 50%)produces a sharp line with no transition. Placing two stops close together — red 48%, blue 52% — creates a narrow 4% blend zone. You can also use length units: linear-gradient(#000 0px, transparent 200px) creates a fixed 200px fade regardless of element size, useful for scroll-fade overlays.
Gradients between complementary colors (e.g., red to cyan) often pass through an ugly muddy gray in the middle. This happens because the default sRGB interpolation travels through the color space's gray center. The fix: use the new CSS Color Level 4 interpolation syntax. linear-gradient(in oklch, red, cyan)interpolates through the perceptually uniform OKLab color space, producing vibrant rainbow transitions instead of gray. For browsers that don't support this yet, add a mid-point color stop manually — inserting a saturated yellow at 50% between red and cyan avoids the gray zone entirely.
CSS supports multiple backgrounds, and each can be a gradient. Layer a subtle radial spotlight over a linear gradient: background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.2), transparent 50%), linear-gradient(135deg, #667eea, #764ba2). Repeating gradients (repeating-linear-gradient) create patterns like stripes, checkerboards, and progress bar fills without a single image. A classic diagonal stripe: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px).
Gradients cannot be directly transitioned with CSS because they are treated as images, not interpolatable values. However, there are effective workarounds: animate the background-position on an oversized gradient (e.g., 200% width with background-size) to create a sliding color effect. Alternatively, use the @property rule to register a custom CSS property as a color, enabling smooth gradient color transitions in Chrome and Safari.
CSS measures gradient angles clockwise from the top: 0deg goes bottom-to-top, 90deg goes left-to-right, and 180deg goes top-to-bottom. Some design tools (like older versions of Sketch) use a different convention where 0deg is right and angles go counter-clockwise. When porting gradients from Figma (which matches CSS convention), the angles transfer directly. From Photoshop, subtract the angle from 90deg.
CSS gradients are calculated by the rendering engine and require zero HTTP requests, no image decoding, and minimal memory. A complex 5-stop linear gradient is orders of magnitude cheaper than loading a 50KB gradient image. They also scale perfectly to any resolution (Retina, 4K) without quality loss. The only scenario where image backgrounds win is for complex noise or photographic textures that cannot be expressed as mathematical gradients.