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