Build beautiful CSS gradients visually — copy the code instantly.
Gradient Type
Color Stops
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
Raw gradient value
linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)Tip: Linear gradients use an angle (0° = top to bottom, 90° = left to right). Radial gradients radiate outward from a center point. Conic gradients sweep around a center like a pie chart. The repeating- prefix tiles the gradient pattern across the element.
The CSS Gradient Generator lets you build beautiful linear, radial, and conic gradients with a live visual editor. Add color stops, drag positions, set the angle or shape, and toggle repeating mode — all in real time. When your gradient looks perfect, copy the ready-to-use CSS background property with one click and drop it straight into your stylesheet.
It supports all three CSS gradient types: linear-gradient (directional color transitions), radial-gradient (circular or elliptical bursts), and conic-gradient (pie-chart style sweeps). All three also support a repeating variant.
Each color stop has a position slider (0–100%) and a number input. Drag the slider or type a value to place the stop anywhere along the gradient. Stops are automatically sorted by position when building the CSS.
Yes. Click 'Copy' next to the CSS output to copy the full background property declaration (e.g., background: linear-gradient(...)). Paste it into any CSS rule, Tailwind arbitrary value, or inline style.
Enabling Repeating adds the repeating- prefix (repeating-linear-gradient, etc.), which tiles the gradient pattern beyond the last color stop, creating stripe or wave effects.