CSS Gradient Generator

Design modern linear, radial, and conic gradients visually. Add multiple color stops, tune angles, explore curated trending presets, and export clean production CSS and Tailwind code.

LINEAR• 135°• 3 STOPS
Direction / Angle135°

Gradient Color Stops

Color Hex
Position (%)
Trending Presets:

Export Gradient CSS & Tailwind

CSS Backgroundbackground: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
Tailwind CSSbg-gradient-to-br from-[#3B82F6] via-[#8B5CF6] to-[#EC4899]

How to Create Custom Gradients

1

Select Type & Adjust Angle

Choose between Linear, Radial, or Conic gradient styles. Rotate the angle dial (e.g. 45° for soft diagonal or 90° for horizontal) to set the direction of the light.

2

Add Stops & Copy Code

Add up to 6 custom color stops along the gradient track and drag their positions. Click once to copy the generated CSS or Tailwind background class into your project.

Linear Gradients

Transitions colors along a straight directional line. Most popular for hero sections, website header cards, and call-to-action button backgrounds.

Radial Gradients

Radiates outward from a central point in circular or elliptical patterns. Ideal for glowing orb spotlights, vignette backdrops, and subtle depth effects.

Conic Gradients

Sweeps color stops around a center origin point (like the hands of a clock). Great for color wheels, circular pie progress rings, and metallic radar sweeps.

Frequently Asked Questions

How do I use this gradient in Tailwind CSS?▼

Our generator automatically computes the Tailwind utility classes (e.g. bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6]). You can copy the Tailwind snippet directly and paste it into your JSX/HTML element className.

How many color stops can I add?▼

You can create gradients with 2 to 6 color stops. Click the "Add Color Stop" button to insert intermediate colors, and drag or type each stop's percentage along the track.

Are CSS gradients responsive and performant?▼

Yes! CSS gradients are calculated by the browser GPU on the fly, meaning they require zero network bandwidth, scale infinitely without pixelation, and load instantly compared to heavy background images.