Frequently Asked Questions
What gradient types are supported?
Linear (straight line with angle), radial (circular from center), and conic (color sweep around a point). All produce valid CSS for modern browsers.
How do I add or remove color stops?
Click "Add Stop" to add a new color stop. Each stop has a color picker and a position slider (0–100%). Click the × button to remove it. Minimum 2 stops required.
What CSS is generated?
The tool generates a background property using linear-gradient(), radial-gradient(), or conic-gradient() with all your color stops and settings.
Is my data safe?
Yes. All gradient generation happens entirely in your browser. No data is ever sent to any server.
Can I use it in Tailwind or CSS-in-JS?
Yes. The CSS value works anywhere — stylesheets, inline styles, Tailwind arbitrary values, styled-components, and CSS modules.
How to make a transparent gradient in CSS?
Use rgba or hsla colors: background: linear-gradient(to right, rgba(79,70,229,1), rgba(79,70,229,0)). The last value (alpha) controls transparency. You can also use transparent keyword: linear-gradient(red, transparent).
How to apply a gradient to text in CSS?
Use background-clip: text with -webkit-text-fill-color: transparent. Example: background: linear-gradient(90deg, #4f46e5, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent. Works in all modern browsers.