Gradient Generator

CSS gradients create smooth transitions between two or more colors and are rendered by the browser rather than loaded as images. That means they scale to any resolution, add zero network overhead, and animate smoothly with transition and @keyframes. Gradients count as an image, so they work anywhere an image can — as backgrounds, in mask-image, border-image, orlist-style-image.

Linear, radial, and conic

linear-gradient() runs in a straight line at an angle you choose (in degrees or keywords like to right). radial-gradient() fans out from a center point in a circle or ellipse — great for spotlights and vignettes. conic-gradient() sweeps around a center like the hand of a clock, which is what makes color wheels and pie-chart backgrounds possible in pure CSS.

Tips that usually help

• Add explicit color stops (#14b8a6 20%, #0f766e 80%) to sharpen the transition instead of letting the browser interpolate edge-to-edge.
• Stack multiple backgrounds (comma-separated) to layer a gradient over an image or another gradient.
• Use background-blend-mode to mix a gradient with an image for a tinted hero.
• For dark UIs, subtle gradients (2–5% lightness delta) read as depth; strong gradients read as decoration.

Browser support is universal in modern browsers. Conic gradients landed in Safari 12.1 and Firefox 83, so they're safe to use without a fallback today.