Build beautiful CSS gradients with up to 6 color stops. Copy the code and use it anywhere.
A CSS gradient is a smooth transition between two or more colors defined entirely in code — no image files needed. The browser renders it at any resolution, making gradients perfect for backgrounds, buttons, and hero sections with zero performance cost.
Linear gradients flow in a straight line at any angle. Radial gradients radiate outward from a center point, great for spotlights and glows. Conic gradients sweep around a center like a color wheel — useful for pie charts and starburst effects.
0° flows top to bottom, 90° flows left to right, 135° diagonal. For hero backgrounds, 120°–150° feels natural and dynamic. For subtle button gradients, 180° (vertical) or 90° (horizontal) keeps things clean and understated.
Gradients work best as accents rather than base colors — avoid using them on text unless clipped. They're ideal for hero backgrounds, card hover states, loading shimmer effects, and decorative dividers between sections.
Set the background property to linear-gradient() or radial-gradient(), for example background: linear-gradient(135deg, #ff922e 0%, #4ecdc4 100%);. In the generator, pick your colors, choose the type and angle, then copy the finished line.
CSS allows as many as you like. This generator supports up to six. Drag each stop to set where its color is fully reached, from 0% to 100%.
0deg runs bottom to top, 90deg left to right, and 180deg top to bottom. The default, 135deg, runs from the top left to the bottom right, a common choice for cards and buttons. The generator offers 45 degree steps.
No. It outputs linear and radial gradients. For a conic gradient, write it by hand, for example background: conic-gradient(#ff922e, #4ecdc4, #ff922e);, which sweeps the colors around a center point.
The page URL updates as you edit and stores your colors, stop positions, type, and angle. Copy the address bar to share it or bookmark it for later. For ready-made options, browse the CSS gradients collection.
Pick a Zaps template for your next post, story or reel, add your photos and match it to your palette.