Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?↓
A linear gradient blends colors along a straight line at a chosen angle. A radial gradient blends outward from a center point in concentric circles. A conic gradient sweeps colors around a center point like the hands of a clock. This generator supports all three so you can pick the right effect for backgrounds, buttons, or color wheels.
How do color stops and positions work?↓
Each color stop defines a color and the position (0–100%) where it sits along the gradient. Adding more stops lets you create richer, multi-color blends, and adjusting positions controls how quickly one color transitions into the next. This tool lets you use up to six color stops, each with its own opacity.
Can I export gradients as Tailwind CSS classes?↓
Yes, when the gradient maps to Tailwind's built-in utilities — a linear gradient along one of the eight cardinal or diagonal directions with two or three stops becomes classes like bg-gradient-to-r from-[#...] to-[#...]. Radial, conic, arbitrary-angle, or many-stop gradients can't be expressed as standard Tailwind classes, so the tool tells you to use the generated CSS instead.
How do I add transparency to a gradient color?↓
Each color stop has an opacity slider from 0 to 100%. Lowering the opacity outputs the color as an rgba() value with the matching alpha channel, which is handy for fade-out effects or layering gradients over images and other content.
Is this gradient generator free and private?↓
Yes. The CSS Gradient Generator is completely free with no signup required, and it runs 100% locally in your browser. Nothing you create is uploaded to or stored on any server.
Last updated: