Skip to content
techsnow

Colors & Backgrounds

Gradients

Gradients are smooth transitions between colours, created entirely in CSS.

.banner { background: linear-gradient(to right, #1c6fa8, #13997f); }
.sunset { background: linear-gradient(135deg, orange, crimson); }
.glow { background: radial-gradient(circle, #5bb2ec, transparent 70%); }
.stripes { background: repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px); }

Dark overlay on a photo

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 20%)),
    url("hero.jpg") center / cover;
}