Loading...
Create CSS linear, radial, and conic gradients with multiple color stops and live preview.
A CSS gradient is a smooth color transition rendered by the browser without images. Gradients can be linear, radial, or conic, and are used for backgrounds, buttons, and decorative UI elements.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);| Type | Best For |
|---|---|
| Linear | Backgrounds, buttons, headers, dividers |
| Radial | Spotlights, glows, circular elements |
| Conic | Pie charts, color wheels, spinners |
Formula
linear-gradient(angle, color stop, color stop) | radial-gradient(shape size at position, stops)Angle = 0deg points up and increases clockwise, so 90deg runs left to right
Colour stops = a colour plus an optional position, and stops with no position spread evenly
Hard stops = two stops at the same position give a hard edge rather than a blend, which is how stripes are made
Interpolation = the colour space the blend runs through, which CSS Color 4 lets you name
Did you know? A gradient from blue to yellow in sRGB passes through a muddy grey at the midpoint, because the two colours cancel. Interpolating in Oklab instead keeps the midpoint saturated, which is what the in oklab keyword is for.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.