CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually. Add color stops, adjust angles, pick from presets, then copy the ready-to-use CSS.
Gradient Type
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%);
Preset Gradients
How to use this tool
- Choose a gradient type — Linear, Radial, or Conic — using the buttons at the top of the editor.
- Adjust the angle (for linear and conic gradients) or the center position (for radial gradients) to control the gradient direction.
- Edit the color stops: click a color swatch to open the color picker, drag the position slider to move the stop along the gradient, and use the opacity slider to add transparency.
- Click '+ Add Stop' to insert more colors, or the trash icon to remove a stop. At least two stops are required.
- Click Copy CSS to copy the generated code, Download PNG to save the gradient as an image, or Share URL to get a shareable link with your current settings.
Why use our CSS Gradient Generator?
Creating CSS gradients by hand means memorising syntax, guessing angle values, and running repeated browser reloads to see the result. Our visual editor updates in real time as you drag stops and pick colors. The output always includes both the standard and -webkit- prefixed rules so your gradient works in every modern browser.
Frequently Asked Questions
How do I add transparency to a CSS gradient?
Use the opacity slider next to each color stop. The tool generates rgba() values, so each stop can have its own transparency level. A stop at 0% opacity fades to fully transparent, which is perfect for gradients that blend into a background.
What is a conic gradient?
A conic gradient sweeps colors around a center point — like a color wheel — rather than along a straight line (linear) or outward from a center (radial). It is commonly used for pie charts, color pickers, and spinner animations. Conic gradients are supported in all modern browsers.
How do I use a gradient as a CSS background?
Copy the generated CSS and paste it into your stylesheet. For example: .element { background: linear-gradient(135deg, #6366f1, #ec4899); }. Gradients can also be used as border images or to fill text with a few additional CSS properties.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle — for example from top to bottom, or diagonally. A radial gradient radiates outward from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point instead.
Does this tool generate browser-compatible CSS?
Yes. The output always includes the -webkit- prefixed version alongside the standard CSS property, ensuring compatibility with Safari and older Chromium-based browsers. Modern Firefox, Chrome, and Edge support the standard syntax without the prefix.
Related Tools
Markdown Table Generator
Build Markdown tables visually or paste from Excel, Google Sheets, or CSV. Set column alignment and export GFM.
UUID Generator
Generate random UUIDs for apps, databases, and APIs.
Base64 Encoder / Decoder
Encode and decode Base64 text quickly and easily.
Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, HSV, and CMYK instantly. Check WCAG contrast ratios.
Recently Visited Tools
Regex Tester
DeveloperTest and debug regular expressions with real-time match highlighting, group capture, and substitution.
Social Media Image Resizer
ImageResize and crop images to the exact size for Instagram, YouTube, X, Facebook, LinkedIn, TikTok, and Pinterest with one-click presets.
SERP Snippet Preview
DeveloperPreview how your title tag and meta description render in Google, with live pixel-width limits for desktop and mobile.