CSS Gradient Generator

Create beautiful linear, radial, and conic gradients with live preview. Copy CSS code or download as PNG for your web projects.

Gradient Preview

CSS Code

Gradient Type

Angle: 90deg

Color Stops

Preset Gradients (100+)

What is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors, created using CSS without images. Gradients are used for backgrounds, buttons, overlays, and UI elements in web design. There are three types: linear (straight line transition), radial (circular transition from center), and conic (rotational transition around a point). CSS gradients are vector-based, scalable, and load faster than image files.

How to Use This Gradient Generator

Choose gradient type: Linear (straight), Radial (circular), or Conic (rotational)
Add colors: Click color stops to change colors. Add up to 5 colors for complex gradients
Adjust angle: For linear gradients, use the slider or direction buttons to change angle
Use presets: Click any preset gradient to apply it instantly and customize
Copy CSS: Click "Copy CSS" to paste the code directly into your stylesheet
Download PNG: Export the gradient as a 1920×1080 PNG image for use in designs

Gradient Types Explained

Linear Gradient

Colors transition along a straight line. You control the angle (0° = left-to-right, 90° = top-to-bottom, 180° = right-to-left, etc.). Most common gradient type for backgrounds and buttons.

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Radial Gradient

Colors radiate outward from a center point in a circular or elliptical shape. Perfect for spotlight effects, circular buttons, or vignettes. The first color starts at the center, subsequent colors radiate outward.

background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

Conic Gradient

Colors transition in a rotation around a center point, like a color wheel or pie chart. Less common but useful for loading spinners, pie charts, or creative backgrounds. Sweeps clockwise starting from top.

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 100%);

Common Use Cases

Hero section backgrounds: Eye-catching gradients for landing pages and website headers
Button hover effects: Smooth color transitions on interactive elements
Card backgrounds: Subtle gradients to add depth to content cards
Text overlays: Dark-to-transparent gradients over images for readable text
Loading animations: Conic gradients for spinners and progress indicators
Brand identity: Consistent gradient colors across all brand materials
Social media graphics: Download PNG gradients for Instagram, Twitter posts
Mobile app backgrounds: Lightweight, scalable backgrounds for apps

CSS Gradient Best Practices

Use fallback colors: Always provide a solid background-color before the gradient for browsers that don't support gradients
Limit color stops: 2-3 colors create smooth, professional gradients. 4+ colors can look busy or garish
Consider accessibility: Ensure text over gradients maintains sufficient contrast ratio (4.5:1 minimum)
Test on mobile: Gradients can appear different on smaller screens or different displays
Optimize performance: Gradients render faster than images, but complex gradients with many stops can impact performance
Use transparency: rgba() colors with alpha channel create subtle overlay gradients
Match brand colors: Extract colors from your logo or brand guidelines for consistency
Save favorites: Keep a CSS file of your commonly used gradients for quick reuse

Browser Support

CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 10+ supports linear and radial gradients but not conic gradients.

💡 Pro Tip: For IE9 and older browsers, use a fallback background-color or image. The gradient will be ignored and the solid color will display instead.

Frequently Asked Questions

How do I use the generated CSS code?

Copy the CSS code and paste it into your stylesheet. Apply it to any element using the background or background-image property. Example: .hero { background: linear-gradient(...); }

Can I create gradients with more than 5 colors?

This tool limits to 5 colors for simplicity, but you can manually edit the CSS code to add more color stops. However, 2-3 colors typically create the most professional-looking gradients. More colors can appear chaotic.

What's the difference between PNG download and CSS code?

The CSS code is for websites—it's scalable, lightweight, and renders perfectly at any size. The PNG download is a 1920×1080 image file for use in graphic design software, presentations, or social media where you can't use CSS code.

Why should I use CSS gradients instead of images?

CSS gradients load faster (no HTTP requests), scale perfectly at any resolution (vector-based), are easier to modify (just change CSS), work on any screen size without pixelation, and reduce website file size significantly compared to PNG/JPG background images.

Can I animate CSS gradients?

Yes, but not directly. You can animate gradient position using background-position or create multiple gradients and fade between them using opacity transitions. For smooth animated gradients, consider using CSS keyframes with background-position or creating multiple layered gradients.

How do I create a gradient with transparency?

Use rgba() color values instead of hex codes. For example: linear-gradient(90deg, rgba(102, 126, 234, 1) 0%, rgba(102, 126, 234, 0) 100%) creates a blue gradient that fades to transparent. Perfect for overlays on images.