Gradient Generator

Design linear and radial CSS gradients. Pick colors, set direction, copy the code.

Gradient Library

Type

Angle: 135°

Color 1

#a855f7

Color 2

#6366f1

Third color

Show Tailwind

CSS

background: linear-gradient(135deg, #a855f7, #6366f1);

Tailwind CSS

<div class="bg-gradient-to-br from-[#a855f7] to-[#6366f1]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

Generate harmonious color palettes from a base color. Export hex codes instantly.

Paste any color and find the closest Tailwind CSS class instantly. Supports hex, rgb and hsl.

Check WCAG contrast ratios between two colors. Verify AA and AAA compliance in real time.

Generate glassmorphism effects with backdrop-blur, opacity and saturation controls.

Transform screenshots into stunning visuals with browser frames, device mockups, gradient backgrounds and export in multiple formats.

Preview HTML at multiple screen sizes side by side. Test responsive layouts with Tailwind breakpoint reference.