Code

CSS

Colors

Color formats, opacity, gradients, and CSS custom properties.

Typography

Font stacks, sizing, weight, line-height, spacing, and truncation.

Sizing

Width, height, min/max, units, aspect-ratio, and clamp().

Box Model

Content, padding, border, margin, box-sizing, and margin collapse.

Flexbox

One-dimensional layout — direction, alignment, wrap, grow/shrink.

Grid

Two-dimensional layout — columns, rows, areas, auto-fill, and dense.

Responsive Design

Media queries, mobile-first, container queries, and fluid techniques.

Animation

@keyframes, timing functions, fill-mode, staggered sequences and more.

Generative Art with CSS

Pure CSS as a generative-art engine — layered gradients, blend modes, keyframe motion, and noise.

CSS Colors

Color formats, opacity, and CSS custom properties — from named keywords to oklch. MDN Reference

1. Color formats

CSS supports multiple notations for the same color.

color: cornflowerbluenamed keyword

color: #6495edhex

color: rgb(100 149 237)rgb

color: hsl(219 79% 66%)hsl

color: oklch(67% 0.13 260)oklch

/* Named keyword */
color: cornflowerblue;

/* Hex (3, 6, or 8 digits) */
color: #6495ed;
color: #6495edff; /* with alpha */

/* RGB — space-separated (modern) */
color: rgb(100 149 237);
color: rgb(100 149 237 / 80%);

/* HSL — hue saturation lightness */
color: hsl(219 79% 66%);
color: hsl(219 79% 66% / 0.8);

/* oklch — perceptually uniform */
color: oklch(67% 0.13 260);

2. Opacity & transparency

Use the opacity property to affect the whole element, or the alpha channel in a color function for just the color.

opacity: 1

opacity: 0.7

opacity: 0.4

opacity: 0.15

rgba channel 50%

/* Opacity property — affects children too */
.box { opacity: 0.4; }

/* Alpha in rgb / hsl / oklch */
background: rgb(99 102 241 / 50%);
background: hsl(239 84% 67% / 0.5);

/* Transparent keyword */
background: transparent;

/* currentColor — inherits text color */
border-color: currentColor;

3. Background color & gradients

Solid fills and CSS-native gradients.

linear-gradient

radial-gradient

conic-gradient

/* Solid */
background-color: #6366f1;

/* Linear */
background: linear-gradient(
  135deg, #6366f1, #ec4899
);

/* Radial */
background: radial-gradient(
  circle at 30% 50%, #6366f1, #0ea5e9
);

/* Conic */
background: conic-gradient(
  from 0deg, #6366f1, #ec4899,
  #f59e0b, #6366f1
);

4. CSS custom properties for color tokens

Define a color palette once on :root and reference it everywhere with var().

--color-primary

--color-accent

--color-info

--color-success

--color-warning

--color-danger

:root {
  --color-primary: #6366f1;
  --color-accent:  #ec4899;
  --color-info:    #0ea5e9;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
}

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

/* Override inside a component */
.dark-theme {
  --color-primary: #818cf8;
}

5. Adaptive colors with `prefers-color-scheme`

Swap your palette automatically between light and dark OS themes.

:root {
  --bg:   #ffffff;
  --text: #111827;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #0f172a;
    --text: #f1f5f9;
  }
}

body {
  background-color: var(--bg);
  color:            var(--text);
}