CSS Gradient Generator

Create beautiful CSS gradients with a visual editor and live preview

Drag the handles, or click the track to add a stop2 stops

Angle: 135°

Color Stops

100%

CSS Code

background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);

Add legacy -webkit- prefix for older browsers

Presets

Share to Community

Was this tool helpful?

What is CSS Gradient Generator?

Free online CSS gradient generator to design stunning CSS gradients visually with support for linear, radial, and conic gradient types.

Add and position color stops, adjust the gradient angle or center point, and see a live preview update in real time. Build a gradient background for a hero section, button, or card, set the angle for a linear gradient, and add multiple color stops for a smooth multi-color blend. Copy the generated CSS code including cross-browser prefixes. Browse preset gradients for quick inspiration or build your own from scratch. No signup required.

How to Use CSS Gradient Generator

1Choose a gradient type: linear, radial, or conic
2Add color stops and adjust their positions using the color pickers and sliders
3For linear gradients, set the angle using the angle slider
4Copy the generated CSS code and use it in your project

Frequently Asked Questions

CSS supports three gradient types: linear-gradient (colors transition along a straight line), radial-gradient (colors radiate outward from a center point in an ellipse or circle), and conic-gradient (colors rotate around a center point like a color wheel).

Click 'Add Color Stop' to add more colors to your gradient. Each stop has a color picker and a position slider (0% to 100%). You can add as many stops as you want to create complex, multi-color gradients.

Yes. The generated CSS code uses the background property, which works on any HTML element. You can use gradients as page backgrounds, card backgrounds, button backgrounds, text effects (with background-clip), and more.

Apply the gradient to the background property, then add background-clip: text and a transparent text color so the gradient shows through the letters. Copy the gradient CSS from here and combine it with those two lines on your heading or span.

Use the angle control. 0deg runs the gradient bottom to top, 90deg runs left to right, and 45deg gives a diagonal. The live preview updates as you drag, so you can match the angle to your layout before copying the code.

Share this tool

Related Tools

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

Email Signature Generator

Free online email signature generator - create professional HTML email signatures with live preview

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

What is CSS Gradient Generator?

Free online CSS gradient generator to design stunning CSS gradients visually with support for linear, radial, and conic gradient types.

Frequently Asked Questions