📋 In This Guide
Linear, Radial and Conic Gradients Explained
CSS supports three gradient types, each transitioning colors along a different geometry.
Linear
Colors transition along a straight line at any angle — the most common type, used for buttons, headers and backgrounds.
Radial
Colors radiate outward from a center point in a circle or ellipse — good for spotlight and glow effects.
Conic
Colors rotate around a center point by angle, like a color wheel or pie chart — useful for loaders and dials.
Understanding Gradient Angles
Linear gradient angles follow a clockwise convention starting from the bottom: 0deg points from bottom to top, 90deg from left to right, 180deg from top to bottom, and 270deg from right to left.
The Gradient Text Effect
You can apply a gradient directly to text by setting it as a background image on the text element, then clipping the background to the text shape and making the actual text color transparent — a popular technique for headlines and logos.
Need to check text/background contrast too?
Verify any two colors meet WCAG AA/AAA accessibility standards.
Using Gradients with Tailwind CSS
Tailwind ships built-in gradient utilities (bg-gradient-to-r, from-*, to-*) that work well for simple two-color linear gradients, but they don't cover radial, conic, or multi-stop gradients with custom angles. For anything beyond the basics, Tailwind's arbitrary value syntax lets you drop any valid CSS gradient straight into a utility class:
Spaces inside the arbitrary value are written as underscores — this generator's Tailwind output handles that conversion for you automatically.
5 Common Gradient Mistakes to Avoid
background-clip: text and -webkit-background-clip: text for the widest compatibility.Frequently Asked Questions
Linear transitions colors along a straight line at an angle. Radial transitions outward from a center point circularly or elliptically. Conic rotates colors around a center point by angle, like a color wheel.
Any number — there's no hard limit in the specification. Each stop defines a color and optionally a position along the gradient.
No. All modern browsers have supported unprefixed linear-gradient, radial-gradient, and conic-gradient syntax for years.
Yes — set it as background-image, then apply background-clip: text and color: transparent so the text itself displays the gradient.
0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom, and 270deg is right-to-left. 135deg (diagonal) is a very commonly used angle in modern design.
This tool generates a Tailwind-compatible bg-[...] arbitrary value class, letting you apply any valid CSS gradient directly as a utility class with JIT mode enabled.
No. All generation and preview rendering happens instantly in your browser using CSS. Nothing is uploaded, logged, or stored on any server.