Logo

CSS Gradient Generator

Create beautiful CSS gradients with advanced controls. Supports linear, radial, and conic gradients with real-time preview and export options.

Gradient Type

Direction

Color Stops

%
%

Presets

Preview

CSS Code

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

Export Options

Gradient Information

Type: linear
Color Stops: 2
Angle: 90°

How to Use CSS Gradient Generator

1. Choose Gradient Type

  • Linear: Creates gradients along a straight line. Perfect for backgrounds, buttons, and overlays.
  • Radial: Creates gradients from a center point outward. Great for circular effects and spotlights.
  • Conic: Creates gradients that sweep around a center point. Ideal for color wheels and pie charts.

2. Customize Colors

  • Add Color Stops: Click the "+" button to add more colors to your gradient
  • Remove Colors: Click the trash icon to remove unwanted color stops
  • Adjust Colors: Use the color picker or enter hex values directly
  • Set Position: Drag the slider or enter values (0-100%) to control where each color appears

3. Control Direction

  • Linear Gradients: Adjust the angle (0-360°) or use preset angles for common directions
  • Radial Gradients: Choose between circle or ellipse shape, and set the center position
  • Conic Gradients: Set the start angle and center position for the sweep effect

4. Use Presets

  • Built-in Presets: Choose from 10 beautiful pre-designed gradients
  • Random Generator: Click the shuffle button for instant inspiration
  • Quick Apply: Click any preset to immediately apply it to your gradient

5. Export Your Gradient

  • Copy CSS Code: Get the complete CSS code ready to paste into your stylesheet
  • Copy as Image: Copy the gradient as a PNG image to your clipboard
  • Download PNG: Save the gradient as a 1920x1080 PNG file

Examples & Use Cases

Website Backgrounds

Create stunning backgrounds for your website:

/* Ocean sunset background */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Modern dark theme */
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

/* Subtle light gradient */
background: linear-gradient(120deg, #f6f6f6 0%, #e9e9e9 100%);

Button Styling

Beautiful gradient buttons with hover effects:

/* Primary button */
.button-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    transition: transform 0.2s;
}

.button-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* Success button */
.button-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

Card Overlays

Add gradient overlays to cards for depth:

/* Card with gradient overlay */
.card {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* Image overlay with gradient */
.image-overlay {
    position: relative;
}

.image-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

Loading Animations

Create animated loading effects:

/* Animated gradient loader */
.loader {
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulsing radial gradient */
.pulse {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

Text Effects

Gradient text for headings and accents:

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3rem;
    font-weight: bold;
}

/* Animated gradient text */
.animated-text {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

Advanced Techniques

Multiple Gradients

Layer multiple gradients for complex effects:

/* Complex layered gradient */
.complex-bg {
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Pattern overlay */
.pattern-bg {
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Responsive Gradients

Adapt gradients for different screen sizes:

/* Mobile-first gradient approach */
.responsive-bg {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

@media (min-width: 768px) {
    .responsive-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
}

@media (min-width: 1024px) {
    .responsive-bg {
        background: conic-gradient(from 45deg at 50% 50%, #667eea, #764ba2, #667eea);
    }
}

Pro Tips

  • Use at least 2 color stops for a proper gradient effect
  • Position 0% is the start, 100% is the end of the gradient
  • Overlap positions for sharp transitions and color stops
  • Use the reverse button to quickly flip your gradient direction
  • Test in different browsers - gradients are widely supported but may have slight variations
  • Consider accessibility - ensure text remains readable over gradient backgrounds
  • Performance matters - complex gradients can impact rendering performance
  • Fallback colors - always provide a solid background color as a fallback

Browser Support

CSS gradients have excellent browser support:

  • Chrome: Full support since version 26
  • Firefox: Full support since version 16
  • Safari: Full support since version 7
  • Edge: Full support since version 12
  • IE: Partial support (requires prefixes for IE 9-10)

Common Issues & Solutions

Gradient Not Showing

If your gradient isn't visible:

  • Check that you have at least 2 color stops
  • Ensure the element has a defined height or content
  • Verify syntax - missing commas or parentheses can break gradients

Performance Optimization

To improve gradient performance:

  • Avoid overly complex gradients with too many stops
  • Use transform instead of changing gradients for animations
  • Consider using CSS variables for dynamic gradient changes
  • Test on mobile devices for performance impact

Accessibility Considerations

Make your gradients accessible:

  • Ensure sufficient contrast for text readability
  • Provide solid color fallbacks for high contrast mode
  • Test with color blindness simulators
  • Consider using semi-transparent gradients over solid colors