What makes a modern CSS gradient?
Gradients have come a long way since the early days of the web. Today, CSS gradients are used not just for backgrounds, but for text clipping, borders, buttons, and complex shading meshes. A modern gradient usually uses multiple color stops to avoid the "dead zone" (grayish or muddy middle) that often happens when transitioning between two highly saturated opposites.
Linear vs Radial
Linear gradients transition colors along a straight line. They are excellent for buttons, page backgrounds, and text effects. Radial gradients radiate outward from a central point, making them perfect for "glow" effects or spotlights behind cards.
Gamut & Colors
Our generator pulls colors from your active theme, ensuring that every gradient matches your design system. We use premium combinations and OKLCH properties where possible, meaning no muddy transitions in the middle of your gradients.
Frequently Asked Questions
Just hover over the gradient you like and click "Copy CSS." This copies the raw linear-gradient(...) or radial-gradient(...) string. You can paste this directly into your CSS file's background or background-image property. If you're using Tailwind CSS, you can use arbitrary values like bg-[linear-gradient(...)].
To prevent the "muddy middle" effect (where a transition through gray occurs between two contrasting colors), we add intermediate stops (e.g. Primary, Accent, Secondary) to guide the color transition through a pleasant perceptual path.