Day 5: Colors and Backgrounds

What You'll Learn Today

• Designing a color system with CSS variables
• Gradients (linear, radial, conic)
• Background images and their properties
• Opacity vs rgba transparency
• box-shadow and text-shadow

---

Designing a Color System

A well-structured color palette keeps your project visually consistent. Define it once with CSS variables and reuse it everywhere.

:root {
    /* Primary */
    --color-primary: #3b82f6;
    --color-primary-light: #93c5fd;
    --color-primary-dark: #1d4ed8;

    /* Neutrals */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-500: #64748b;
    --color-gray-700: #334155;
    --color-gray-900: #0f172a;

    /* Semantic */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Text */
    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-500);

    /* Background */
    --color-bg: white;
    --color-bg-secondary: var(--color-gray-50);
}

flowchart TB
    subgraph Palette["Color Palette Design"]
        Primary["Primary<br>#3b82f6"]
        Neutral["Neutrals<br>#f8fafc to #0f172a"]
        Semantic["Semantic<br>success / warning / error"]
    end
    style Primary fill:#3b82f6,color:#fff
    style Neutral fill:#64748b,color:#fff
    style Semantic fill:#22c55e,color:#fff

---

Gradients

Linear Gradient

.gradient-1 {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

.gradient-2 {
    background: linear-gradient(135deg, #3b82f6 0%, #22c55e 100%);
}

.gradient-3 {
    background: linear-gradient(
        to bottom,
        #3b82f6 0%,
        #8b5cf6 50%,
        #ec4899 100%
    );
}

Value	Direction
to right	Left to right
to bottom	Top to bottom (default)
to bottom right	Top-left to bottom-right
135deg	At a 135-degree angle

Radial Gradient

.radial {
    background: radial-gradient(circle, #3b82f6, #1e293b);
}

.radial-ellipse {
    background: radial-gradient(ellipse at top left, #3b82f6 0%, transparent 70%);
}

Conic Gradient

.conic {
    background: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #3b82f6);
    border-radius: 50%;
}

---

Background Images

.hero {
    background-image: url("hero.jpg");
    background-size: cover;           /* fill entire area */
    background-position: center;      /* center the image */
    background-repeat: no-repeat;     /* don't tile */
    background-attachment: fixed;     /* parallax effect */
}

/* Shorthand */
.hero {
    background: url("hero.jpg") center / cover no-repeat;
}

Property	Value	Description
background-size	cover	Fills the area, may crop
	contain	Fits entirely, may leave gaps
	100% auto	Full width, auto height
background-position	center	Centered
	top right	Top-right corner
background-repeat	no-repeat	Show once
	repeat	Tile in both directions

Gradient Overlay on an Image

.hero-overlay {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url("hero.jpg") center / cover no-repeat;
    color: white;
}

Technique: Layering a gradient overlay on top of an image improves text readability significantly.

---

Transparency

opacity

.transparent { opacity: 0.5; }    /* entire element becomes semi-transparent */
.invisible   { opacity: 0; }      /* fully transparent (still takes up space) */

rgba / hsla

.overlay {
    background-color: rgb(0 0 0 / 0.5);    /* only the background is transparent */
}

Key difference: opacity makes the entire element (including text and children) transparent. Using rgba or hsla makes only the color itself transparent, leaving text fully opaque.

---

box-shadow

/* Syntax: x-offset y-offset blur spread color */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow    { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

/* Inset shadow */
.inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }

/* Multiple shadows */
.multi-shadow {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Colored glow effect */
.glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

text-shadow

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.neon {
    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6;
}

---

Practice: Hero Section

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #3b82f6;
    --color-primary-dark: #1d4ed8;
}

.hero {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.9)),
        url("hero-bg.jpg") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 32px;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 32px;
    opacity: 0.9;
}

.hero-button {
    display: inline-block;
    background: white;
    color: var(--color-primary);
    padding: 12px 32px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-button:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Feature cards */
.features {
    padding: 64px 16px;
    max-width: 900px;
    margin: 0 auto;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--color-primary);
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

---

Summary

Concept	Description
CSS variables	Centralized color palette management
linear-gradient	Linear color transitions
radial-gradient	Circular/elliptical color transitions
background	Image positioning, sizing, and layering
opacity / rgba	Two approaches to transparency
box-shadow	Add depth with shadow effects

Key Takeaways

1. Use CSS variables to manage your color palette
2. Layer gradient overlays on images for better text readability
3. Understand the difference between opacity and rgba
4. Use box-shadow to create a sense of depth and elevation

---

Exercises

Exercise 1: Basics

Define a color palette with CSS variables and create three message boxes (success, warning, error) using those variables.

Exercise 2: Applied

Build a hero section with a gradient overlay on a background image, white centered text, and a call-to-action button.

Challenge

Create a card component with three shadow states: default (subtle), hover (elevated), and active/click (pressed inward using inset).

---

References

• MDN - Backgrounds and Borders
• MDN - Gradients
• CSS Gradient Generator

---

Next up: On Day 6, we explore Flexbox — the modern layout system that makes aligning and distributing space a breeze.