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. CSS color stops define how the selected colors transition; the result depends on the colors, stop positions, and surrounding design.
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
The preview starts with colors from the active theme. You can choose a base color or randomize the colors to explore alternatives; review each result in context because a generated gradient is not guaranteed to match your brand or meet text-contrast needs.
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(...)].
Some presets include intermediate stops (for example, Primary, Accent, or Secondary) to define a multi-color transition. The stops change the appearance but do not guarantee a specific perceptual result.