Gradients

Code

/* Linear gradient */
.linear {
    background: linear-gradient(to right, #3498db, #2ecc71);
}

.linear-angle {
    background: linear-gradient(45deg, #3498db, #2ecc71, #e74c3c);
}

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

.radial-position {
    background: radial-gradient(circle at top right, #3498db, #2c3e50);
}

/* Conic gradient */
.conic {
    background: conic-gradient(from 0deg, red, yellow, green, blue, red);
    border-radius: 50%;
}

/* Gradient repeat */
.repeating {
    background: repeating-linear-gradient(
        45deg, #3498db, #3498db 10px, #2ecc71 10px, #2ecc71 20px
    );
}

/* Text gradient */
.text-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Border gradient */
.border-gradient {
    border: 4px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(to right, #3498db, #2ecc71) border-box;
}

/* Multi-layer gradient */
.multi-bg {
    background:
        radial-gradient(circle at 20% 50%, rgba(52, 152, 219, 0.3), transparent),
        radial-gradient(circle at 80% 50%, rgba(46, 204, 113, 0.3), transparent),
        #2c3e50;
}

Explanation

linear-gradient for linear; radial-gradient for radial; conic-gradient for conic; they can be layered.

More CSS Snippets