Create linear and radial CSS gradients with a live preview. Choose 2–5 colors, edit stop positions, reverse colors, try presets, and copy or download CSS. Free.
● Your files stay yoursLoading converter…
Reload converterChoose a preset or edit the colors. Pick a linear or radial gradient, set the number of colors and their positions, and adjust the linear angle. The preview and CSS update as you edit. Changing the color count spaces active stops evenly. Copy the declarations into a CSS rule, or download them as gradient.css.
Two to five opaque HEX colors (3 or 6 digits, with or without #). Whole-number positions from 0% to 100% in nondecreasing order; equal positions create a sharp edge. Linear angles are 0–360 degrees. Arabic and Persian digits are accepted for positions and angles. Radial gradients use a centered circle. No transparency, custom color spaces, repeating/conic gradients, image export or existing-CSS import. Inputs stay in your browser and are not saved.
A gradient is a CSS image that scales with its element. Use background-image for the gradient and background-color for a solid fallback. This example runs left to right; copy the generated declarations into your existing stylesheet.
background-color: #156B4F;
background-image: linear-gradient(90deg, #156B4F 0%, #8CE8B3 100%);A stop pairs a color with a position along the gradient. This editor uses percentages. Move stops closer for a quicker transition, farther apart for a wider blend, or set adjacent stops to the same position for a sharp boundary.
CSS starts at 0 degrees pointing upward and rotates clockwise. 90 degrees points right, 180 down, and 270 left. These directions stay the same on Arabic and other right-to-left pages.
A radial gradient spreads outward from a center instead of along a straight line. This tool creates a circle at the center of the element; the first color is toward the center and the last toward the outside.
Choose two to five colors. Changing the count redistributes active positions evenly. Reverse gradient reverses the color order and mirrors each position around 50%, preserving the transition spacing. Reset restores the Mint preset.
The gradient fits the element where you use it. Changing its shape or dimensions changes how the same gradient is displayed. Browser rendering and screen color settings can also affect appearance.
The preview does not assess text contrast. A gradient has varying background colors, so check contrast wherever text appears; a single endpoint check is not enough. Use the contrast checker for individual foreground/background pairs.