Design beautiful gradients and export as CSS or images
Pick colors, add stops, and adjust the angle or center point to create the exact gradient you need. The tool supports linear, radial, and conic gradients with unlimited color stops. Copy the CSS code for your stylesheet or download the gradient as a high-resolution PNG for use in design projects.
Use this tool freeBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
How to use
Choose gradient type
Select linear, radial, or conic. For linear, set the angle; for radial, set the center point and shape.
Add and adjust colors
Click the gradient bar to add color stops. Drag to reposition, double-click to change the color, and adjust opacity for each stop.
Copy CSS or download
Copy the generated CSS code for web use, or set a resolution and download the gradient as a PNG image.
Features
Three gradient types
Create linear gradients with any angle, radial gradients with adjustable center and shape, or conic gradients that sweep around a point. Switch between types and the preview updates instantly.
Unlimited color stops
Add as many color stops as you need along the gradient bar. Drag stops to reposition them, double-click to change the color, or right-click to delete. Each stop supports opacity for semi-transparent gradients.
CSS code output
The tool generates valid CSS background-image code with vendor prefixes. Copy the code and paste it directly into your stylesheet. The output updates in real time as you edit the gradient.
PNG image export
Download the gradient as a PNG at any resolution — from 100 px thumbnails to 4000 px banners. Use the image as a background, overlay, or design element in tools that do not support CSS gradients.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceSpecifications
| Gradient types | Linear, radial, conic |
| Color stops | Unlimited |
| Angle range | 0–360° |
| CSS output | Standard + vendor prefixes |
| PNG export | Up to 4000 × 4000 px |
| Processing | Client-side (instant) |
Related Magic Eraser Tools
Common questions
Can I create a gradient with transparency?
+
Yes. Each color stop has an opacity slider. Set the opacity below 100% to create semi-transparent areas in the gradient. The CSS output uses rgba values and the PNG export preserves the alpha channel.
What is a conic gradient?
+
A conic gradient radiates color stops around a center point, like the sweep of a clock hand. It is useful for pie-chart-style effects, color wheels, and decorative backgrounds. Browser support is excellent in modern browsers.
Can I use the generated CSS in any framework?
+
Yes. The output is standard CSS that works in plain HTML, React, Vue, Tailwind, and any other framework that supports inline or stylesheet-based CSS.
Need a gradient over a photo?
AI Enhance can adjust the color tone and lighting of your photos, and our Image Overlay Tool lets you blend a gradient on top of any image for a polished look.
Try it freeMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Convert colors between HEX, RGB, HSL, HSB, CMYK, and CSS named formats. See a live preview, copy any value, and export a color card.
Convert HEX color codes to RGB values and vice versa. Live preview, one-click copy, and CSS snippet output. works in your browser.
Pick any color from an uploaded image and get its HEX, RGB, and HSL codes instantly. Build palettes from photos for web design, branding, and illustration.
Upload a photo and extract 5-10 dominant colors with HEX, RGB, and HSL codes. Copy swatches, export as ASE or CSS variables.
Generate QR codes for URLs, text, WiFi credentials, and vCards. Customize colors, add a center logo, and download as PNG or SVG.
Calculate width, height, or aspect ratio for images and video. Enter any two values and get the third. Preset ratios for social media, film, and print.