Colors & Backgrounds

HTML & CSS · 8 entries

Color Formats

syntax

color: #rrggbb | #rgb | rgb(r g b) | hsl(h s l) | oklch(L C H);

example

.text-hex   { color: #1e293b; }
.text-rgb   { color: rgb(30 41 59); }
.text-hsl   { color: hsl(215 28% 17%); }
.text-oklch { color: oklch(0.35 0.05 260); }

/* With alpha (transparency) */
.overlay { background: rgb(0 0 0 / 0.5); }
.tint    { background: hsl(210 100% 50% / 0.1); }

Note Modern CSS uses space-separated values with a slash for alpha: rgb(255 0 0 / 0.5). The older comma syntax still works but is being phased out. oklch provides perceptually uniform colors, so adjusting lightness produces visually consistent results across hues.

color formathex colorrgbhsloklchtransparent color

currentColor Keyword

syntax

border-color: currentColor;
fill: currentColor;

example

.icon-button {
  color: #2563eb;
  border: 2px solid currentColor;
}

.icon-button svg {
  fill: currentColor;
}

.icon-button:hover {
  color: #1d4ed8;
  /* border and SVG automatically update */
}

Note currentColor refers to the element's computed color value. It keeps borders, SVG fills, shadows, and other properties in sync with the text color. Change color once and everything follows.

currentColorinherit colorsync colorsicon color

Gradients

syntax

background: linear-gradient(direction, color1, color2);
background: radial-gradient(shape, color1, color2);
background: conic-gradient(from angle, color1, color2);

example

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.spotlight {
  background: radial-gradient(circle at 30% 50%, #fbbf24, transparent 70%);
}

.pie-chart {
  background: conic-gradient(#3b82f6 0% 65%, #e5e7eb 65% 100%);
  border-radius: 50%;
}

Note Gradients are background-image values, not colors, so they cannot be used with the color property. You can layer multiple gradients separated by commas. Conic gradients are great for pie-chart-like visuals.

gradientlinear gradientradial gradientconic gradientcolor gradientbackground gradient

Background Image

syntax

background-image: url("path");
background-size: cover | contain | width height;
background-position: x y;
background-repeat: no-repeat | repeat;

example

.hero {
  background-image: url("/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shorthand */
.banner {
  background: url("/images/pattern.svg") center / cover no-repeat;
}

Note background-size: cover fills the entire container (may crop). contain fits the whole image (may leave empty space). When using the background shorthand, the size must follow position with a slash separator.

background imagecover imagebackground sizebackground positionhero image

Opacity

syntax

opacity: 0 to 1;

example

.disabled-card {
  opacity: 0.5;
  pointer-events: none;
}

.watermark {
  opacity: 0.15;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade-in.visible {
  opacity: 1;
}

Note opacity affects the entire element and all its children. For transparent backgrounds only, use rgba or hsla with alpha instead. An element with opacity less than 1 creates a new stacking context.

opacitytransparencyfadesemi transparentinvisible

CSS Custom Properties (Variables)

syntax

:root {
  --name: value;
}
element {
  property: var(--name, fallback);
}

example

:root {
  --color-primary: #2563eb;
  --color-surface: #ffffff;
  --radius-md: 8px;
  --space-4: 16px;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.button {
  background: var(--color-primary);
}

Note Custom properties cascade and inherit like any CSS property. Define theme tokens on :root for global access. They can be changed per element, making component theming straightforward. The fallback value in var() is used only if the variable is not defined.

css variablescustom propertiescss tokenstheme variablesdesign tokensvar

Color Mix

syntax

color-mix(in colorspace, color1 percentage, color2 percentage)

example

.hover-darken {
  background: var(--color-primary);
}
.hover-darken:hover {
  background: color-mix(in oklch, var(--color-primary) 80%, black);
}

.tinted-surface {
  background: color-mix(in srgb, var(--color-primary) 10%, white);
}

Note color-mix() blends two colors in the specified color space. Use oklch for perceptually even mixing. This replaces the need for pre-computed hover shades. Specify percentages to control the blend ratio.

color mixdarken colorlighten colorblend colorshover color

Box Shadow

syntax

box-shadow: offset-x offset-y blur spread color;
box-shadow: inset offset-x offset-y blur spread color;

example

.card {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
}

.card-elevated {
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.1);
}

.input:focus {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
}

Note Layer multiple shadows for realistic depth (soft large shadow + tight small shadow). Use box-shadow: 0 0 0 Npx color as a pseudo-border that does not affect layout. The inset keyword creates inner shadows.

box shadowdrop shadowcard shadowelevationinner shadowfocus ring shadow