CSS Gradient Generator

Generate linear, radial, and conic CSS gradients with a visual editor. Copy CSS code instantly.

Free Always No Account Needed 100% Client-Side
#22c55e0%
#86efac100%
background: linear-gradient(90deg, #22c55e 0%, #86efac 100%);

About this tool

CSS gradients let you create smooth color transitions without image files. This visual generator creates all three gradient types:

Linear gradient — colors transition along a straight line at any angle. Control the angle (0-360°), color stops, and transparency.

Radial gradient — colors radiate from a center point. Control center position (circle or ellipse) and color stops.

Conic gradient — colors rotate around a center point (like a color wheel). Great for pie charts and checkerboard patterns.

The visual editor lets you: - Add, remove, and reorder color stops - Set exact percentages for each stop - Adjust transparency (alpha) - Set angle and position - Preview in real-time - Copy the complete CSS rule with one click

Also generates Tailwind CSS equivalent classes where applicable.

Frequently Asked Questions

What is the difference between linear and radial gradients?
Linear gradients transition along a straight line (any angle). Radial gradients radiate outward from a central point.
Can I use multiple color stops?
Yes. You can add as many color stops as you want, each at a specific position (percentage or pixel).
Are gradients supported in all browsers?
Yes. Linear and radial gradients are supported in all modern browsers. Conic gradients need Chrome 69+, Firefox 83+, Safari 12.1+.
How do I make a gradient with transparency?
Use rgba() or hsla() for your color stops, or use the alpha slider in the color picker to set opacity per stop.

Related Tools

Color Picker

Pick colors visually and convert between HEX, RGB, HSL, and CMYK. Generate color palettes and accessibility contrast ratios.

CSS Minifier

Minify or beautify CSS. Remove comments, collapse whitespace, shorten values. Shows compression percentage saved.

Box Shadow Generator

Visually generate CSS box-shadow and border-radius. Multiple shadow layers, live preview, copy CSS instantly.

HTML Formatter

Format, beautify, and minify HTML. Auto-indent nested elements and collapse attributes. 100% client-side.