🎨 Colors, Backgrounds, and Gradients

Why Colour Matters

Colour establishes brand identity, creates visual hierarchy, improves usability, and sets emotional tone. A film director uses colour grading to steer your mood and attention; a web designer uses CSS colour the same way — to make an interface feel cohesive, intuitive, and alive.

💬 "Color does not add a pleasant quality to design — it reinforces it." — Pierre Bonnard. Colour works best in service of structure, not as decoration bolted on afterward.

CSS applies colour in many places: text (color), fills (background-color), edges (border-color), and effects (box-shadow, text-shadow). First, though, we need to agree on how to write a colour.

CSS Colour Formats

CSS accepts several notations for the same colour. They differ in readability, whether they support transparency, and how easy they make it to adjust a colour.

Named colours

color: black;
color: rebeccapurple;   /* added in memory of Rebecca Meyer */
color: goldenrod;

There are 148 keywords — handy for quick prototyping, but too coarse for real design work.

Hexadecimal

color: #ff5733;    /* RR GG BB in base-16, each 00–FF */
color: #f00;       /* shorthand: expands to #ff0000 */
color: #ff573380;  /* 8-digit hex adds an alpha byte (80 = 50%) */

Hex is the industry default and what most design tools export. Each pair is one channel (red, green, blue) from 00 to ff.

RGB and RGBA

color: rgb(255, 87, 51);          /* legacy comma syntax */
color: rgba(255, 87, 51, 0.5);    /* fourth value is alpha, 0–1 */

/* Modern space-separated syntax — rgb() now handles alpha too */
color: rgb(255 87 51);
color: rgb(255 87 51 / 50%);

HSL and HSLA

color: hsl(9, 100%, 60%);          /* hue, saturation, lightness */
color: hsl(9 100% 60% / 50%);      /* modern syntax with alpha */

HSL is the most human format for designers, which is why it gets its own section below.

Modern formats

color: hwb(9 20% 10%);              /* hue, whiteness, blackness */
color: lch(60% 80 40);             /* perceptually uniform lightness/chroma/hue */
color: oklch(0.7 0.15 40);         /* OKLCH — great for consistent palettes */
color: color(display-p3 1 0.34 0.2); /* wider-gamut colour on capable screens */

Thinking in HSL

HSL describes a colour by three intuitive dials, which makes it easy to derive lighter, darker, or related colours by hand.

• Hue (0–360°): position on the colour wheel — 0° red, 120° green, 240° blue.
• Saturation (0–100%): intensity — 0% is grey, 100% is fully vivid.
• Lightness (0–100%): 0% black, 50% the "true" colour, 100% white.

Harmonies from the wheel

Background Properties

The simplest background is a flat fill. From there, a family of properties positions and sizes background images (which include gradients).

.panel {
  background-color: hsl(0 0% 96%);
  /* When both color and image are set, the image paints on top of the color */
  background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

The individual properties

.hero {
  background-image: url("/img/mountains.jpg");
  background-repeat: no-repeat;   /* repeat | repeat-x | repeat-y | no-repeat | space | round */
  background-position: center;    /* keywords, %, lengths, or edge offsets */
  background-size: cover;         /* cover | contain | <length> | % */
  background-attachment: fixed;   /* scroll | fixed | local — fixed gives a parallax feel */
}

The background shorthand

/* color image repeat attachment position / size */
.card {
  background: #333 url("/img/noise.png") no-repeat center / cover;
}

/* Multiple backgrounds stack: the FIRST layer sits on top */
.overlayed {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) no-repeat center / cover,
    url("/img/photo.jpg") no-repeat center / cover;
}

CSS Gradients

Gradients are smooth colour transitions generated by the browser — no image request, infinitely scalable, and editable in code. They are technically background images, so they live in background-image.

Linear gradients

/* Default flows top → bottom */
background-image: linear-gradient(#e66465, #9198e5);

/* Direction: keyword or angle */
background-image: linear-gradient(to right, #e66465, #9198e5);
background-image: linear-gradient(45deg, #e66465, #9198e5);

/* Colour stops with positions */
background-image: linear-gradient(to right, red 0%, gold 50%, green 100%);

/* Hard stops make crisp stripes (no blend between the two 50% points) */
background-image: linear-gradient(to right, #4f46e5 50%, #a855f7 50%);

Radial gradients

/* Radiates outward from a point; default shape is an ellipse */
background-image: radial-gradient(circle, #e66465, #9198e5);

/* Control shape, size, and origin */
background-image: radial-gradient(circle closest-side at 25% 75%, #fff, #9198e5);

Conic gradients

/* Sweeps colours AROUND a centre — perfect for pie charts and colour wheels */
background-image: conic-gradient(#4f46e5, #a855f7, #ec4899, #4f46e5);

/* A two-slice pie using hard stops */
background-image: conic-gradient(#22c55e 0deg 90deg, #e5e7eb 90deg 360deg);

Repeating gradients & patterns

/* Diagonal stripes with no image file */
.stripes {
  background-image: repeating-linear-gradient(
    45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px
  );
}

/* A dot grid using a tiny radial gradient tile */
.dots {
  background-image: radial-gradient(circle at 1px 1px, #333 1px, transparent 0);
  background-size: 12px 12px;
}

Layering & Effects

Multiple backgrounds

Comma-separate values to stack layers. A classic pattern is a dark gradient over a photo so overlaid text stays readable:

.hero {
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) no-repeat center / cover,
    url("/img/city.jpg") no-repeat center / cover;
  color: #fff;
}

background-clip: text

Clip a gradient to the shape of the text for an eye-catching heading:

.gradient-text {
  background-image: linear-gradient(to right, #f06, #48f);
  background-clip: text;
  -webkit-background-clip: text;   /* Safari still needs the prefix */
  color: transparent;
  font-weight: 800;
}

background-blend-mode

/* Blend a tint into a photo without editing the image */
.duotone {
  background: url("/img/portrait.jpg") center / cover, #2563eb;
  background-blend-mode: luminosity;
}

Contrast & Performance

Colour contrast (WCAG)

Readable colour is not optional. The Web Content Accessibility Guidelines set minimum contrast ratios between text and its background:

Performance

• Prefer CSS gradients to image gradients — no HTTP request, smaller payload.
• Be cautious with large background-attachment: fixed images; they can cause scroll jank on mobile.
• Use SVG data-URIs for crisp, tiny patterns.
• Alpha transparency is more expensive to composite than opaque fills — use it deliberately.

Hands-on Exercise

.hero {
  --brand-h: 220;
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0) 0 0 / 16px 16px,
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.55)),
    radial-gradient(circle at 30% 30%,
      hsl(var(--brand-h) 90% 55%),
      hsl(calc(var(--brand-h) + 60) 80% 40%));
}
.hero h1 { font-size: clamp(2rem, 1rem + 5vw, 4rem); }

Summary & Quiz

📚 Further Reading

• MDN — Backgrounds and Borders
• web.dev — Learn CSS: Gradients
• Coolors palette generator  •  WebAIM Contrast Checker

🚀 What's Next?

With colour handled, we tackle how elements are sized and spaced: The Box Model in Depth — content, padding, border, margin, and the all-important box-sizing.