Create linear, radial and conic CSS gradients with a live preview. Edit up to eight color stops, transparency, angles, centers and repeating patterns, then copy or download the CSS.
All gradient editing and rendering happens locally. No account, upload or external API is needed. The preview uses the generated CSS directly, so you can inspect the declaration before copying it.
Linear, radial and conic gradients, including their repeating variants. Linear angles use CSS degrees: 0 points up and 90 right. Radial gradients use circle/ellipse farthest-corner sizing. Conic positions are fractions of a full turn.
Use 2–8 hex RGB colors with positions and opacity from 0–100%. Equal adjacent positions create hard edges. Stops must be in ascending order; Sort stops reorders them explicitly. Opacity is output as rgba color values.
It lets you see transparency. The checkerboard is preview-only and is not included in exported CSS. Your page’s own background will show through transparent areas.
Yes. Enable Repeating gradient. Its pattern interval is the distance from the first stop to the last; make that span smaller than 100% to see repeats within the preview. A zero-length repeating interval is rejected.
No. This tool exports a CSS background-image declaration, or a .css file containing a .gradient rule. The gradient adapts to its element’s size. Display and browser rendering can differ; contrast accessibility needs a separate check.
