CSS Gradient Generator

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