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 freeFeatures
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.
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.
Specifications
| 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.
Resize images to exact pixel dimensions for social media, web, and print. Sign-in required for free edits. Supports JPEG, PNG, and WebP up to 50 MB.
Compress JPEG, PNG, and WebP images by up to 80 % with minimal visible quality loss. Adjust the quality slider for full control. Sign-in required for free edits.
Convert PNG images to JPEG format instantly. Adjust output quality, pick a background color for transparent areas, and download — sign-in required.
Convert JPEG images to PNG format for lossless quality and transparency support. Ideal before background removal. Sign-in required; no install required.
Convert Apple HEIC and HEIF photos to universally compatible JPEG format. Works in the browser — no app install, sign-in required, no file uploads to a server.
Convert JPEG and PNG to WebP for faster page loads, or convert WebP back to JPEG/PNG for compatibility. Sign-in required, no install, runs in the browser.