Colors & Backgrounds — CSS Reference Guide

Named Colors

CSS provides 148 named colors (plus transparent and currentColor). They are easy to remember but offer limited palette control.

CSS

.box { color: tomato; }
.bg  { background-color: cornflowerblue; }
.bdr { border-color: mediumseagreen; }
.hid { color: transparent; }

Live Example — Named Color Swatches

tomato

cornflowerblue

mediumseagreen

gold

hotpink

slateblue

coral

teal

orchid

salmon

steelblue

rebeccapurple

Hex Colors

Hexadecimal notation expresses colors as #RRGGBB. A shorthand 3-digit form exists, and an 8-digit form adds alpha transparency.

CSS

/* 6-digit hex */
.red   { color: #ff0000; }
.brand { color: #646cff; }

/* 3-digit shorthand (#RGB expands to #RRGGBB) */
.white { color: #fff; }  /* same as #ffffff */
.cyan  { color: #0ff; }  /* same as #00ffff */

/* 8-digit with alpha (#RRGGBBAA) */
.semi  { color: #646cff80; } /* 50% opacity */
.light { color: #646cff33; } /* 20% opacity */

Live Example — Hex Formats

#646cff (6-digit)

#f00 (3-digit)

#646cffcc (80% alpha)

#646cff66 (40% alpha)

#646cff33 (20% alpha)

Hex Alpha Scale

00 = fully transparent, ff = fully opaque. Common values: 80 = 50%, cc = 80%, 33 = 20%, 66 = 40%.

rgb() / rgba()

Specify colors with Red, Green, Blue channels (0–255 or 0%–100%), plus an optional alpha channel (0–1).

CSS

/* Modern syntax (no commas needed) */
.a { color: rgb(100 108 255); }
.b { color: rgb(100 108 255 / 0.5); }

/* Legacy syntax (commas) */
.c { color: rgb(100, 108, 255); }
.d { color: rgba(100, 108, 255, 0.5); }

/* Percentage values */
.e { color: rgb(39% 42% 100%); }

Live Example — RGB Color Mixer

R: 255
G: 0, B: 0

R: 0
G: 180, B: 0

R: 0, G: 0
B: 255

R: 255, G: 255
B: 0 = Yellow

R: 0, G: 255
B: 255 = Cyan

R: 255, G: 0
B: 255 = Magenta

Alpha Transparency

alpha: 1.0

alpha: 0.75

alpha: 0.5

alpha: 0.25

alpha: 0.1

hsl() / hsla()

Hue-Saturation-Lightness is more intuitive for humans. Hue is a degree on the color wheel (0–360), Saturation is the intensity (0%–100%), and Lightness is brightness (0%–100%).

CSS

/* Modern syntax */
.a { color: hsl(235 100% 70%); }
.b { color: hsl(235 100% 70% / 0.5); }

/* Legacy syntax */
.c { color: hsl(235, 100%, 70%); }
.d { color: hsla(235, 100%, 70%, 0.5); }

/* Hue values: 0=red, 120=green, 240=blue */

Live Example — HSL Color Wheel

Hue rotates around the color wheel at full saturation (100%) and medium lightness (50%):

0 Red

30 Orange

60 Yellow

120 Green

180 Cyan

240 Blue

270 Purple

330 Pink

Saturation Scale (Hue: 235, Lightness: 50%)

100%

75%

50%

25%

0% (gray)

Lightness Scale (Hue: 235, Saturation: 100%)

10%

30%

50%

70%

90%

Why HSL is Great for Theming

With HSL, creating color variants is trivial: keep the hue, adjust saturation and lightness. Dark variant? Lower lightness. Muted? Lower saturation. This makes building consistent color palettes much easier than with hex or RGB.

currentColor

The currentColor keyword refers to the element's computed color value. It lets borders, shadows, and backgrounds automatically match the text color.

CSS

.btn {
  color: #646cff;
  border: 2px solid currentColor;
  box-shadow: 0 2px 8px currentColor;
}

/* Change color once, everything updates */
.btn:hover {
  color: #10b981;
}

Live Example — currentColor

color: #646cff — border matches!

color: #ef4444 — border matches!

color: #10b981 — border matches!

opacity vs Alpha Channel

Both control transparency, but they behave differently.

CSS

/* opacity affects the ENTIRE element and its children */
.card { opacity: 0.5; }

/* Alpha only affects that specific color */
.card { background: rgba(100, 108, 255, 0.5); }

Live Example — opacity vs Alpha

opacity: 0.4

Text is ALSO faded! Everything becomes transparent.

rgba alpha: 0.4

Text stays crisp! Only the background is translucent.

opacity Affects Children

opacity makes the entire element and all its children transparent. You cannot make a child "more opaque" than its parent. Use alpha channels (rgba/hsla) on individual properties instead when you only want to fade the background.

background-color

Sets a solid color behind the element's content. Accepts any color value.

CSS

.solid { background-color: #646cff; }
.trans { background-color: rgba(100, 108, 255, 0.2); }
.named { background-color: cornflowerblue; }
.hsl   { background-color: hsl(235, 100%, 70%); }

background-image

Sets one or more images (or gradients) as the background. Images layer on top of background-color.

CSS

.photo {
  background-image: url("hero.jpg");
}

.gradient {
  background-image: linear-gradient(135deg, #646cff, #10b981);
}

/* Multiple backgrounds (first listed is on top) */
.layered {
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("hero.jpg");
}

background-size

Controls how a background image is scaled inside its container.

CSS

.cover   { background-size: cover; }   /* fill container, may crop */
.contain { background-size: contain; } /* fit inside, may leave gaps */
.exact   { background-size: 200px 100px; }
.pct     { background-size: 50% auto; }

Live Example — cover vs contain

background-size: cover

Fills entire box (may crop)

background-size: contain

Fits inside (may leave gaps)

background-position

Sets where the background image is placed within the element.

CSS

.a { background-position: center; }
.b { background-position: top right; }
.c { background-position: 50% 25%; }
.d { background-position: 20px 40px; }
.e { background-position: bottom 10px right 20px; }

Live Example — background-position

top left

center

bottom right

background-repeat

Controls whether and how a background image tiles.

CSS

.a { background-repeat: repeat; }      /* default: tile both axes */
.b { background-repeat: no-repeat; }   /* show once */
.c { background-repeat: repeat-x; }   /* horizontal only */
.d { background-repeat: repeat-y; }   /* vertical only */
.e { background-repeat: space; }      /* even spacing, no clipping */
.f { background-repeat: round; }      /* stretch to fill evenly */

background-attachment

Controls whether the background scrolls with the content or stays fixed in the viewport.

CSS

.scroll { background-attachment: scroll; } /* default */
.fixed  { background-attachment: fixed; }  /* parallax effect */
.local  { background-attachment: local; }  /* scrolls with content */

Parallax with background-attachment: fixed

Setting background-attachment: fixed creates a simple parallax scrolling effect. The background stays in place while the content scrolls over it. Note: this is disabled on most mobile browsers for performance reasons.

background-clip

Defines how far the background extends within the element. The text value creates gradient text effects.

CSS

.a { background-clip: border-box; }  /* default */
.b { background-clip: padding-box; }
.c { background-clip: content-box; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #646cff, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Live Example — background-clip: text

Gradient Text Effect

Rainbow gradient clipped to text

linear-gradient()

Creates a smooth color transition along a straight line. You can control the angle and add multiple color stops.

CSS

/* Direction keywords */
.a { background: linear-gradient(to right, #646cff, #10b981); }
.b { background: linear-gradient(to bottom right, #646cff, #10b981); }

/* Angle (0deg = to top, 90deg = to right) */
.c { background: linear-gradient(135deg, #646cff, #10b981); }

/* Multiple stops with positions */
.d { background: linear-gradient(
    90deg,
    #ef4444 0%,
    #f59e0b 25%,
    #10b981 50%,
    #646cff 75%,
    #a855f7 100%
  ); }

/* Hard stop (no transition) */
.e { background: linear-gradient(
    90deg,
    #646cff 50%,
    #10b981 50%
  ); }

Live Example — linear-gradient Angles

to right

to bottom

45deg

135deg

270deg

Multi-stop & Hard Stops

5-color smooth

Hard stops (no fade)

radial-gradient()

Creates a circular or elliptical gradient radiating outward from a center point.

CSS

/* Basic circle */
.a { background: radial-gradient(circle, #646cff, #0a0a1a); }

/* Ellipse (default) */
.b { background: radial-gradient(ellipse, #646cff, #0a0a1a); }

/* Positioned */
.c { background: radial-gradient(circle at top left, #646cff, #0a0a1a); }

/* Sized */
.d { background: radial-gradient(circle 100px, #646cff, #0a0a1a); }

Live Example — radial-gradient

circle (center)

circle at top left

ellipse, 3 stops

conic-gradient()

Creates a gradient that rotates around a center point, like a color wheel or pie chart.

CSS

/* Color wheel */
.wheel {
  background: conic-gradient(
    red, yellow, lime, aqua,
    blue, magenta, red
  );
  border-radius: 50%;
}

/* Pie chart */
.pie {
  background: conic-gradient(
    #646cff 0% 40%,
    #10b981 40% 70%,
    #f59e0b 70% 100%
  );
  border-radius: 50%;
}

Live Example — conic-gradient

Color Wheel

Pie Chart (40/30/30)

from 90deg

Square Quadrants

Repeating Gradients

The repeating- variants of each gradient type tile automatically.

CSS

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #646cff,
    #646cff 10px,
    transparent 10px,
    transparent 20px
  );
}

.rings {
  background: repeating-radial-gradient(
    circle,
    #646cff,
    #646cff 5px,
    transparent 5px,
    transparent 15px
  );
}

.starburst {
  background: repeating-conic-gradient(
    #646cff 0deg 15deg,
    transparent 15deg 30deg
  );
}

Live Example — Repeating Gradients

repeating-linear

repeating-radial

repeating-conic

Gradient Patterns (Stripes)

By combining hard color stops and repeating gradients, you can create pure-CSS patterns with zero images.

CSS

/* Horizontal stripes */
.h-stripes {
  background: repeating-linear-gradient(
    0deg,
    #646cff 0px,
    #646cff 10px,
    transparent 10px,
    transparent 20px
  );
}

/* Checkerboard */
.check {
  background-color: #1a1a2e;
  background-image:
    linear-gradient(45deg, #646cff33 25%, transparent 25%),
    linear-gradient(-45deg, #646cff33 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #646cff33 75%),
    linear-gradient(-45deg, transparent 75%, #646cff33 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Live Example — CSS Gradient Patterns

Horizontal Stripes

Vertical Stripes

Diagonal Stripes

Checkerboard

Grid Lines

Warning Stripes

mix-blend-mode

Controls how an element's colors blend with the content behind it, similar to Photoshop blending modes.

CSS

.overlay-text {
  mix-blend-mode: multiply;
}

/* Common values */
.a { mix-blend-mode: normal; }
.b { mix-blend-mode: multiply; }   /* darken */
.c { mix-blend-mode: screen; }     /* lighten */
.d { mix-blend-mode: overlay; }    /* contrast */
.e { mix-blend-mode: difference; } /* invert */
.f { mix-blend-mode: color-dodge; }

Live Example — mix-blend-mode

multiply

screen

overlay

difference

Overlapping Circles

Multiple Backgrounds

CSS lets you stack multiple backgrounds on a single element. Each layer can have its own image, position, size, and repeat. The first listed layer renders on top.

CSS

.layered {
  background:
    /* Layer 1 (top): semi-transparent overlay */
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.7)),
    /* Layer 2: decorative gradient */
    radial-gradient(circle at 30% 70%, #646cff44, transparent 50%),
    /* Layer 3 (bottom): base color */
    linear-gradient(135deg, #0a0a1a, #1a1a3e);
}

Live Example — Stacked Backgrounds

3 radial gradients + 1 linear base

Common Gotchas

background Shorthand Resets Other Properties

The background shorthand resets background-color, background-image, background-position, background-size, and others to their defaults. If you set background-color first, then use background: url(...), the color is wiped. Set background-color after the shorthand, or include it in the shorthand.

Hex Alpha Notation Support

8-digit hex colors (#646cff80) are supported in all modern browsers, but not in IE11. If you need IE support, use rgba() instead.

Gradient Banding

Subtle gradients across large areas can show visible color bands. Mitigate this by adding a faint noise texture overlay or slightly increasing the color range of your gradient.

background-attachment: fixed on Mobile

Most mobile browsers disable background-attachment: fixed for performance. The background will behave as scroll instead. Use JavaScript-based parallax for mobile if needed.

opacity Creates a Stacking Context

Setting opacity to anything less than 1 creates a new stacking context. This can affect z-index ordering of child elements and cause unexpected layering issues.

Pro Tips

CSS Custom Properties for Color Palettes

Define your palette with HSL in custom properties: --hue: 235; --primary: hsl(var(--hue), 100%, 70%);. Changing --hue shifts your entire color scheme at once. This is the foundation of modern CSS theming.

Use HSL for Hover States

Instead of hard-coding a separate hover color, adjust lightness: background: hsl(235, 100%, 60%) to background: hsl(235, 100%, 50%). Same hue, deeper shade.

Gradient Borders

You cannot directly apply a gradient to border-color. Instead, use border-image: linear-gradient(...) 1 or the background-clip padding-box trick with a pseudo-element.

Performance of Gradients

CSS gradients are generated by the browser and are resolution-independent. They are cheaper than image files and look sharp on Retina displays. Prefer gradients over raster images whenever possible.

color-mix() (Modern CSS)

The new color-mix() function lets you blend two colors: color-mix(in srgb, #646cff, white 30%) mixes 30% white into your blue. Great for programmatic tints and shades without manually computing hex values.

Accessible Color Contrast

Always ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (WCAG AA). Use browser DevTools or online checkers to verify your color combinations.