Back to Lessons

CSS Colors Backgrounds

April 5, 2026

Colors, Gradients, Backgrounds

Modern color systems, CSS custom properties, gradients.

Color Formats

:root {
  --primary: #007bff;
  --primary-dark: #0056b3;
  --success: #28a745;
  --gray-100: #f8f9fa;
}

.button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 24px;
}

Gradients and Images

.hero {
  background: 
    linear-gradient(135deg, var(--primary), var(--secondary)),
    url("hero.jpg") center/cover;
}

Color Systems

  • OKLCH() modern color picker
  • CSS custom properties (variables)
  • color-mix() function
  • relative color syntax
Previous Lesson Next Lesson