Free CSS Gradient Generator – Linear, Radial & Text
Create a CSS gradient with your own colors or a ready-made preset. Adjust color stops, angle, transparency, and shape, preview the result, then copy CSS for your website or design.
Your gradient preview
Transparent color stops reveal the preview's light background. Your copied CSS retains the actual transparency.
Customize your gradient
Copy your gradient CSS
Quick CSS
Ready-to-use CSS snippet
How to make a custom CSS gradient
- Choose a preset or enter your own HEX colors. Use two colors for a simple blend or three for an extra transition.
- Choose a linear or radial gradient. Adjust the angle for linear gradients, or the shape and center for radial gradients.
- Change opacity and stop positions to fine-tune the transition. Zero percent opacity makes that stop transparent.
- Switch to Text if you want a gradient headline rather than a background.
- Copy the CSS and paste it into your stylesheet. Replace the example selector in the full snippet with your own class.
Which gradient should you use?
Linear gradients blend colors along a direction and are useful for buttons, hero sections, cards, and banners. Radial gradients expand from a center point and are useful for glow effects or softer background highlights. Text gradients apply a gradient inside large text; use them sparingly and keep text readable.
How color-stop positions work
Each position controls where a color appears along the gradient. For a gradual transition, keep the stops spaced apart; bring two positions closer together to create a sharper change. Stops are kept in nondecreasing order so the preview matches the exported CSS.
Transparent gradients and accessible text
Opacity changes how a stop blends with the underlying surface. A transparent gradient may look different on white, dark, and image backgrounds. Check your finished design with the actual background and text colors, not only this preview. Text gradients are better suited to large headings than body copy.
Continue your design
CSS gradient questions
Can I use these gradients in a commercial website?
Yes. The generated CSS values can be used in your own or client projects. You should still test readability, accessibility, and compatibility in your finished layout.
Can I create a transparent CSS gradient?
Yes. Move a color stop's opacity slider to 0%. The resulting output uses an RGBA color with zero alpha, allowing the underlying background to show through.
Why does my gradient text disappear?
Gradient text depends on background clipping. The full text snippet provides a solid-text fallback and applies transparency only when background-clip text is supported.
Do I need prefixed linear-gradient CSS?
Modern browsers support standard linear-gradient and radial-gradient syntax. The full snippet uses standard syntax and adds a prefixed background-clip declaration for gradient text.
Everyday AI Guides · designs24hr.com — Free design and developer tools.
Create Better Visuals and Trackable Campaigns
Explore free tools for QR codes, campaign tracking links, structured AI prompts, color palettes, CSS gradients, random colors, and proportional image or video dimensions.
