CSS Gradient Generator
Build a linear, radial, or mesh gradient with a live preview. Adjust colors, angle, and stops, then copy the CSS straight into your project.
Gradient type
Color stops
CSS
Building gradients that look intentional
Gradients read as polished when the colors are close together on the color wheel — a deep blue fading to teal, or orange fading to warm pink — and read as muddy when opposite colors (red to green, blue to orange) meet in the middle. If you need to bridge two very different colors, add a third stop between them to guide the transition instead of leaving a flat blend.
Linear vs. radial vs. mesh
Linear gradients suit banners, buttons, and section backgrounds where you want a directional flow. Radial gradients work well for spotlight effects or subtle depth behind a centered element. Mesh gradients — several soft radial blobs layered together — are the current go-to for hero sections and marketing pages that want color without a flat, corporate feel.
Also useful: Color Palette Generator and Color Palette Visualizer.
Frequently asked questions
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions outward from a center point. A mesh gradient layers several radial gradients at different positions to create a soft, organic, multi-color blend — popular for hero backgrounds.
linear-gradient() and radial-gradient() are supported in every modern browser. Mesh gradients here are built from layered radial-gradient() backgrounds, which is also broadly supported — no vendor prefixes needed.
As many as you add. Two stops gives a simple fade; three or more lets you control exactly where each color transition happens using the position of each stop.