TinyTools

🌈 DESIGN

Gradient Studio

Build linear, radial, and conic gradients with a stops editor, live preview, and CSS plus Tailwind output.

Your files are processed directly on your device and are not uploaded to our servers.

Gradient

Stops (3/5)

Preview

Code

CSS

.gradient {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}

Tailwind

bg-gradient-to-r from-[#6366f1] via-[#a855f7] to-[#ec4899]

How to use

  1. Pick a gradient type and preset — or build your own stops.
  2. Adjust colors, positions, and angle while watching the live preview.
  3. Copy the CSS background or Tailwind class into your project.

FAQ

What gradient types are supported?
Linear (with angle), radial (circle), and conic (from an angle). Add up to 5 stops, drag positions, and copy the CSS or Tailwind class.
How do I use the Tailwind output?
Paste the generated class (for example bg-gradient-to-r from-[#6366f1] to-[#ec4899]) onto your element. It uses arbitrary values, so no config changes are needed.
Can I use this for text or borders?
Yes — the same CSS works with background-clip: text for gradient text, or behind a padded wrapper for gradient borders. The preview shows the plain background fill.
Is my work uploaded anywhere?
No. Every gradient is computed locally in your browser. Nothing you tweak or copy ever leaves your device.

Related tools