How do I make a gradient in Tailwind CSS?

Use Tailwind utilities: bg-gradient-to-r from-violet-500 to-blue-500. Or use arbitrary values: bg-[linear-gradient(135deg,#667eea,#764ba2)]. This generator outputs both formats.

Can I use CSS gradients as backgrounds?

Yes. Set background: linear-gradient(...) on any element. Gradients can also be used in border-image, mask-image, and as the background for text clipping effects.

What is a conic gradient in CSS?

A conic gradient (conic-gradient()) transitions colors around a center point — like a pie chart — instead of linearly across. Supported in all modern browsers.

How do I create a gradient that fades to transparent in CSS?

Use a transparent color stop: linear-gradient(180deg, #667eea 0%, transparent 100%). The keyword "transparent" is equivalent to rgba(0,0,0,0). For gradients fading to transparent on an element with a non-white background, ensure the transparent stop uses the background color's RGB values to avoid the "gray edge" problem: linear-gradient(180deg, #667eea, rgba(37,99,235,0)).

How do I use CSS gradients in Tailwind CSS?

Tailwind provides gradient direction utilities (bg-gradient-to-r, bg-gradient-to-br, etc.) combined with from-*, via-*, and to-* color utilities: bg-gradient-to-r from-violet-500 via-purple-500 to-blue-500. For custom gradients, use arbitrary values: bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)].

All tools CSS Box Shadow HTML Formatter HTML Viewer

🎨

CSS Gradient Generator

Build linear, radial & conic gradients — drag stops, adjust opacity, click preview to move center, export CSS / Tailwind / SCSS

100% in-browserLinear · Radial · ConicRepeating gradientsOpacity per stopCSS · Tailwind · SCSS · CSS Var

Presets (21)

Gradient Bar

Click to add · Drag to move · Double-click to remove

Export

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Type

Direction

135°

Angle135°

Color Stops (2)

#667eea

at 0%

Position0%

Opacity100%

#764ba2

at 100%

Position100%

Opacity100%

You might also need

Browse all tools

CSS Box ShadowGenerate CSS box shadows HTML FormatterBeautify HTML code HTML ViewerPreview HTML in browser Color PickerPick & convert colors UUID GeneratorGenerate v4 UUIDs All tools

CSS Gradient Generator — Create Beautiful Gradients Instantly

CSS gradients let you transition smoothly between two or more colors without using image files. They're used for hero backgrounds, button styles, card overlays, text effects, and decorative accents. The three types — linear-gradient(), radial-gradient(), and conic-gradient() — each create a different visual effect and are supported in all modern browsers.

This CSS gradient generator gives you a live preview as you build. Add color stops, drag them to reorder, adjust the angle and position, and copy the finished CSS or Tailwind code directly into your project. Start from a preset or build from scratch — no signup, no limits, free forever.

How it works

Build Your Gradient in Seconds

Choose a type

Pick linear (directional), radial (circular), or conic (angular sweep) gradient.

Pick your colors

Add 2–10 color stops with the color picker. Drag the handles to set each stop's position.

Adjust direction

Set the angle for linear gradients, or the center position for radial and conic.

Copy the CSS

Click "Copy CSS" or "Copy Tailwind" to get production-ready code for your project.

Use cases

What Developers Use CSS Gradients For

🎨

Hero backgrounds

Full-width gradient backgrounds for landing page hero sections and banners.

🔲

Button styles

Gradient fills on primary CTA buttons for depth and visual hierarchy.

🃏

Card overlays

Gradient overlays on image cards to ensure text legibility over photos.

✨

Text effects

Gradient clip on text (background-clip: text) for colorful headline styles.

📊

Progress bars

Gradient-filled progress and loading bars that look more polished than solid fills.

🎭

Decorative accents

Gradient borders, dividers, and decorative blobs behind content sections.

FAQ

Frequently Asked Questions

1Why does my CSS gradient look different in Firefox than Chrome?

Color interpolation differences and gamma correction can cause gradients to appear slightly different across browsers, especially at midpoints. Add an explicit midpoint color stop to get more consistent results, and test the final CSS in all target browsers before shipping.

2What's the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line (angle). Radial gradients radiate outward from a center point in an elliptical or circular shape. Conic gradients transition colors around a center point like a clock or pie chart.

3How do I add multiple color stops to a CSS gradient?

Add more color values to the gradient function: linear-gradient(135deg, #667eea 0%, #a855f7 50%, #ec4899 100%). Each stop has a color and an optional position percentage. You can add as many stops as needed.

4Can I use a CSS gradient with Tailwind?

Yes. Tailwind has built-in gradient utilities (bg-gradient-to-r from-violet-500 to-blue-500) and supports arbitrary values for custom gradients: bg-[linear-gradient(135deg,#667eea,#764ba2)]. This generator outputs both formats.

5How do I create a CSS gradient text effect?

Apply the gradient as a background, then set -webkit-background-clip: text, background-clip: text, and color: transparent. The gradient is clipped to the text shape, making the text itself show the gradient colors.

6How do I create a gradient that fades to transparent?

Use a transparent stop: linear-gradient(180deg, #667eea 0%, transparent 100%). To avoid the gray-edge problem on colored backgrounds, use rgba(R,G,B,0) instead of the transparent keyword.

7Can I animate a CSS gradient?

CSS gradients are not directly animatable. Common workaround: animate background-position on an oversized gradient. Or use @property to register custom color stop properties for smooth interpolation.

8What is a hard stop in a CSS gradient?

Two color stops at the same position create an abrupt color change: linear-gradient(90deg, #667eea 50%, #764ba2 50%). Hard stops are used for striped patterns and split-color backgrounds.

9How do I create a gradient border in CSS?

Use background-clip with padding-box and border-box: set border: 2px solid transparent and background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box.

10When should I use a radial gradient instead of a linear gradient?

Use radial gradients when color should radiate from a focal point — spotlight effects, vignettes, or radial glows. Use linear gradients for directional effects: hero background fades, button fills, or progress bars. Conic gradients work best for pie-chart-style or angular color sweep designs.

11How do I use the CSS gradient output in Tailwind CSS?

This generator outputs both CSS and Tailwind formats. Use bg-gradient-to-r from-violet-500 to-blue-500 for built-in colors, or arbitrary values like bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)] for custom gradients. Click the Tailwind tab to get the ready-to-use class string.

Last updated: May 2026

Feedback for css_gradient_generator

Tell us what's working, what's broken, or what you wish we built next — it directly shapes our roadmap.

You make the difference

Good feedback is gold — a rough edge you hit today could be smoother for everyone tomorrow.

Feature ideas often jump the queue when lots of you ask.
Bug reports with steps get fixed faster — paste URLs or examples if you can.
Name and email are optional; we won't use them for anything except replying if needed.

Stay Updated

Get the latest tool updates, new features, and developer tips delivered to your inbox.

What you'll get

Product updates & new tools
JSON, API & developer tips
Unsubscribe anytime — no hassle

Get in touch

Feature ideas, bugs, or a quick thanks — we read every message.

support@unblockdevs.com