Design a linear, radial, or conic gradient visually — add color stops, set the angle or position, and watch the live preview. Copy clean CSS when it looks right.
Gradients are everywhere in modern web design — hero backgrounds, buttons, cards, and badges. Hand-writing the CSS, though, means remembering the exact syntax for angles, color-stop positions, and radial shapes, then reloading to see if it looks right. This tool flips that around: you design the gradient visually with a live preview, and it writes correct, copy-ready CSS for you.
It runs entirely in your browser — no account, nothing uploaded — so it's a fast, private scratchpad whenever you need a background.
background declaration and paste it straight into your stylesheet.background: linear-gradient(90deg, #ff6b6b 0%, #f8b500 100%); — the angle controls direction (0° points up, 90° points right).radial-gradient(circle at center, …) — colors radiate out from a point.conic-gradient(from 0deg at center, …) — colors sweep around a center like a color wheel.Pick linear, radial, or conic, set your colors and their stops, adjust the angle or position against the live preview, and copy the CSS. Paste it as the background and the hero section stops being boring.
Linear blends along a direction, radial blooms outward from a point, and conic sweeps around a center like a color wheel. All three are a click apart here, previewed live on your colors.
Add stops along the track and position each where you want the transition to sit. Two stops make a blend; three or more make sunsets, brand ramps, and mesh-adjacent effects.
Large areas crossing few hues can show visible steps. Closer colors, more stops, or a slightly different angle usually smooth it, and the preview shows the fix immediately.
Yes: the same CSS applies to buttons and, with background-clip, to text. Copy the gradient here and apply the technique where the design calls for it.