Gradients in CSS

CSS gradients let you create smooth transitions between two or more colors, without using images.

Linear Gradients

/* Top to bottom (default) */
.gradient { background: linear-gradient(#3498db, #2c3e50); }

/* Left to right */
.gradient { background: linear-gradient(to right, #e74c3c, #f39c12); }

/* Diagonal */
.gradient { background: linear-gradient(45deg, #667eea, #764ba2); }

Multiple Color Stops

.rainbow {
    background: linear-gradient(
        to right,
        #e74c3c,
        #f39c12,
        #2ecc71,
        #3498db,
        #9b59b6
    );
}

Radial Gradients

/* Circle from center */
.radial { background: radial-gradient(circle, #3498db, #2c3e50); }

/* Ellipse (default shape) */
.radial { background: radial-gradient(#fff, #ddd); }

/* From a specific position */
.radial { background: radial-gradient(circle at top left, #e74c3c, transparent); }

Practical Examples

/* Hero section gradient */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4rem 2rem;
}

/* Subtle card gradient */
.card {
    background: linear-gradient(to bottom, #fff, #f8f9fa);
    border: 1px solid #eee;
}

/* Button gradient */
.btn-gradient {
    background: linear-gradient(to right, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
}