Gradient Generator

ColorsNew

Create linear or radial gradients with up to 5 color stops. Control direction with preset angles or a custom value. Export as CSS background property, Tailwind classes, or SVG markup.

Click to copy CSS

Type

Direction

Color Stops (2/5)

background: linear-gradient(90deg, #7c3aed 0%, #22d3ee 100%);

Works great for

🎨

Hero section backgrounds

Design smooth linear or radial CSS gradients for website hero sections and landing pages. The live preview and one-click CSS copy let you iterate on color combinations and get straight to implementation.

⚛️

React and Tailwind projects

Generate CSS gradient code and matching Tailwind utility classes in a single tool. Copy the from/via/to class string directly into your Tailwind component without writing any custom CSS.

🖌️

Brand and identity design

Explore gradient palettes for brand backgrounds, logo fills, and marketing assets. Adjust color stop positions precisely with the slider or numeric input to match exact brand color percentages.

🔘

Button and UI component styling

Create gradient fills for CTA buttons, badges, and cards that stand out against flat backgrounds. Export SVG gradient definitions to use inside icon masks or as reusable design tokens.

✨

Gradient text effects

Generate the background CSS for gradient text using background-clip and -webkit-text-fill-color. The CSS output tab gives you the exact background property value ready to pair with those rules.

📱

Social media graphic backgrounds

Create vibrant gradient backgrounds for Instagram story templates, Twitter/X header images, and Open Graph cards. Radial gradients add depth to flat-looking social media graphics quickly.

css gradient generatorlinear gradientradial gradientgradient css codetailwind gradientgradient color stopsbackground gradientgradient text csssvg gradientgradient maker

Frequently asked questions

How do I create a CSS gradient background?

Add color stops, choose linear or radial, and set a direction using a preset angle or a custom value. The live preview updates immediately and the CSS background code is generated for you to copy.

Can I export the gradient as Tailwind classes or SVG?

Yes. Besides the raw CSS background property, the tool can export the same gradient as Tailwind utility classes or as SVG markup for use in vector graphics.

Is there a limit to how many color stops a gradient can have?

You can add up to 5 color stops per gradient, each with its own position and color, which covers the vast majority of linear and radial gradient designs.

What is the difference between a linear and radial gradient?

A linear gradient transitions colors along a straight line at a set angle, while a radial gradient radiates colors outward from a center point. The tool lets you switch between both types with the same color stops.