HTML & CSS - Mastery / Advanced CSS Features

Gradients and Background Images

🎒Using Gradient Colors and Background Images

These are powerful tools to create visually appealing UI elements without external images, and offer great flexibility for modern designs.

✅ CSS Gradients

Gradients are smooth transitions between two or more colors and are treated as background images in CSS.

Master Code Block for further usage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradient Box</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="box">
      <h2>Gradient Box</h2>
      <p>This box has a gradient background.</p>
    </div>
  </body>
</html>

Creates a gradient along a straight line (default: top to bottom).

Syntax:

background: linear-gradient(direction, color-stop1, color-stop2, ...);
.box {
  background: linear-gradient(to right, #3498db, #9b59b6);
  border-radius: 10px;
  max-width: 400px;
  margin: 50px auto;
}

Direction options:

  • to right, to left, to top, to bottom

  • or use angles like 45deg

.box {
  background: linear-gradient(
    45deg,
    #e74c3c,
    #f1c40f
  ); /* red to yellow at 45 degrees */
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
}

Radiates from a center point outward in a circular or elliptical shape.

Syntax:

background: radial-gradient(shape size at position, start-color, ..., last-color);

.box {
  background: radial-gradient(circle, #1abc9c, #2ecc71); /* Teal to Green */
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  margin: 60px auto;
}

Shapes:

  • circle (default), ellipse

Positioning:

.box {
  background: radial-gradient(
    at top left,
    #e91e63,
    #3f51b5
  ); /* Pink to Indigo */
  padding: 2rem;
  border-radius: 12px;
  max-width: 420px;
  margin: 60px auto;
}

Rotates around a central point, like a pie chart.

Syntax:

background: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
.box {
  width: 300px;
  height: 300px;
  margin: 60px auto;
  padding: 1.5rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, red, yellow, green, blue, red);
}
/* Another example */
background: conic-gradient(red 45deg, yellow 90deg, green 210deg);

You can control where color changes occur:

.box {
  background: linear-gradient(to bottom, #2980b9 0%, #6dd5fa 50%, #ffffff 100%);
  padding: 2rem;
  border-radius: 12px;
  max-width: 420px;
  margin: 60px auto;
}

✅ Background Images

You can set actual images as backgrounds for any element.

🔹 Key Properties

Property

Description

background-image

Sets the image or gradient

background-repeat

repeat, no-repeat, repeat-x, repeat-y

background-position

center, top left, bottom right, etc.

background-size

cover, contain, or specific sizes (e.g. 100% 100%)

background-attachment

scroll (default), fixed, local

✅ Combining Gradients with Background Images

✅ Summary

Feature

Use Case

linear-gradient

Horizontal, vertical, angled color fades

radial-gradient

Circular or spotlight-like effects

conic-gradient

Circular color transitions (e.g., charts)

background-image

Set image backgrounds

Layering

Combine gradients + images for advanced design