GRD

CSS Gradient Generator

LOCAL · Browser-Only

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 recipe

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

What types of CSS gradients are there?

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).

How do I add multiple color stops?

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.

Can I use gradients as backgrounds?

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.

How do I make gradient text?

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.

How do I set the direction of a linear gradient?

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

CSS

AI CSS Generator

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

SHD

Css box shadow

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

Html email signature

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

◻️

Css border radius

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

⬛

Flexbox builder

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

🪟

Glassmorphism css

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

Font pairing tool

Free online font pair generator - find beautiful Google Fonts pairings with live preview and ready-to-use code

🎨

Rgb to hex

Free online color converter - convert colors between HEX, RGB, HSL formats with live preview

Keep reading: Tailwind CSS Cheat Sheet and http status codes reference. Doing this in code instead? See the utility endpoints.

GRD