How to use
- 1Pick Linear, Radial or Conic and set the angle, shape or center position.
- 2Click the gradient bar to add a color stop and drag the handles to move stops.
- 3Fine-tune each stop’s color, position and opacity, or start from one of 16 presets.
- 4Copy the CSS (with a solid fallback) or the Tailwind arbitrary value.
Linear, radial and conic gradients
linear-gradient() blends colors along a straight line at an angle: 0deg runs from bottom to top, 90deg from left to right and 135deg from the top-left to the bottom-right corner. radial-gradient() spreads outward from a center point as a circle or an ellipse, and the center can sit in any of nine positions (for example circle at top left). conic-gradient() sweeps colors around a center like a color wheel, starting from the angle you set — ideal for pie charts, color wheels and loading rings. All three work in every current browser.
Color stops and transparency
Each stop has a color and a position from 0% to 100%. Two stops at the same position create a hard edge instead of a blend, which is how stripes are made. Lowering a stop’s opacity writes the color as an 8-digit hex value (#rrggbbaa), so you can fade into transparency over an image; the checkerboard behind the preview shows which parts are see-through. The Reverse button mirrors the position of every stop.
CSS and Tailwind output
The CSS output has two declarations: a solid background in the first stop’s color as a fallback, followed by the gradient. The Tailwind output is an arbitrary value such as bg-[linear-gradient(135deg,#c6f04f_0%,#4fb3f0_100%)], with underscores in place of spaces as Tailwind requires, so you can paste it straight into a class attribute without touching your config.
Frequently asked questions
How do I make a gradient background in CSS?
Use the background property with a gradient function, e.g. background: linear-gradient(90deg, #ff5f6d, #ffc371);. Build it visually here and copy the result.
How do I make a gradient fade to transparent?
Lower the opacity of a stop. The output uses 8-digit hex colors, which all modern browsers support.
How do I use a custom gradient in Tailwind CSS?
Copy the Tailwind output — an arbitrary bg-[…] class — and add it to your element. No config changes are needed.
Why is there a fallback color?
Very old browsers and some email clients ignore gradients; the solid background line keeps text readable there.
Not happy with the results?
Talk to Webin Agency about fast, SEO-friendly websites, e-commerce and Google Ads management.