CSS Colors, Backgrounds, and Gradients

# CSS Colors, Backgrounds, and Gradients

1. Introduction #

2. Learning Objectives #

• Master color formats: HEX, RGB, RGBA, and HSL.

• Apply background colors and background images.

• Control background repetition and positioning.

• Create linear and radial gradients.

3. Detailed Explanations #

Color Formats #

• Color Names: red, blue, transparent

• HEX: #FF0000 (Red)

• RGB / RGBA: rgba(255, 0, 0, 0.5) (Red with 50% opacity)

• HSL: hsl(120, 100%, 50%) (Green based on Hue, Saturation, Lightness)

.text-examples {
    color: #333333; /* Dark gray HEX */
    background-color: rgba(0, 0, 0, 0.1); /* Light transparent black */
    border-color: hsl(200, 100%, 50%); /* Bright blue HSL */
}

Background Images #

.hero-section {
    background-image: url('hero.jpg');
    background-size: cover; /* Covers the whole area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
}

Linear Gradients #

.gradient-box {
    /* Gradient from top to bottom */
    background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

.diagonal-gradient {
    /* 45 degree angle */
    background: linear-gradient(45deg, blue, purple);
}

Radial Gradients #

.circle-gradient {
    background: radial-gradient(circle, white, black);
}

4. Mini Project: Colorful Hero Section #

<header class="hero">
    <h1>Welcome to the Future</h1>
    <p>Discover amazing gradients.</p>
</header>

.hero {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    /* Beautiful modern gradient */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

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

> [!TIP] > Always provide a fallback background-color in case your background-image fails to load!

5. MCQs #

6. Summary #