Colors and Backgrounds

/* Named */
color: red;
color: transparent;
color: currentColor;   /* inherits the current `color` value */

/* Hex */
color: #ff0000;        /* RGB */
color: #ff0000cc;      /* RGBA (last two digits = alpha) */
color: #f00;           /* 3-digit shorthand */
color: #f00c;          /* 4-digit shorthand (RGBA) */

/* RGB / RGBA */
color: rgb(255 0 0);               /* CSS Color 4 — space syntax */
color: rgb(255 0 0 / 0.5);        /* with alpha */
color: rgb(255, 0, 0);            /* legacy comma syntax */
color: rgba(255, 0, 0, 0.5);      /* legacy RGBA */

/* HSL / HSLA */
color: hsl(0 100% 50%);            /* hue saturation lightness */
color: hsl(0 100% 50% / 0.5);
color: hsl(0, 100%, 50%);          /* legacy */

/* HWB */
color: hwb(0 0% 0%);              /* hue whiteness blackness */
color: hwb(120 20% 10% / 0.8);

/* LAB / LCH (perceptually uniform) */
color: lab(50% 40 -30);
color: lab(50% 40 -30 / 0.8);
color: lch(50% 60 120);
color: lch(50% 60 120 / 0.5);

/* OKLCH / OKLAB (recommended for gamut mapping) */
color: oklch(0.7 0.15 120);
color: oklch(0.7 0.15 120 / 0.8);
color: oklab(0.7 -0.1 0.1);

/* Display-P3 (wide gamut) */
color: color(display-p3 1 0 0);
color: color(srgb 1 0 0 / 0.5);
color: color(rec2020 0.5 0.3 0.2);

/* relative color syntax (CSS Color 5) */
color: oklch(from var(--brand) l c calc(h + 30));

color: #333;          /* text and currentColor */
opacity: 0.5;         /* affects entire element + children */
/* prefer color with alpha channel instead of opacity for backgrounds */

background-color: #fff;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.5);
background-color: oklch(0.9 0.05 100);

background-image: url("hero.jpg");
background-image: url("sprite.png"), url("bg.png"); /* multiple — first on top */
background-image: none;

/* Gradients as background-image */
background-image: linear-gradient(to right, red, blue);
background-image: radial-gradient(circle, white, black);
background-image: conic-gradient(from 90deg, red, yellow, green);

background-position: center;
background-position: top right;
background-position: 50% 50%;
background-position: 20px 40px;
background-position: left 20px top 40px; /* offset from edge */
background-position-x: center;
background-position-y: 30%;

background-size: auto;          /* default — natural size */
background-size: cover;         /* fill container, crop excess */
background-size: contain;       /* fit inside, letterbox */
background-size: 200px 100px;   /* explicit width height */
background-size: 50% auto;      /* percentage width, auto height */

background-repeat: repeat;      /* default */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;       /* tile without clipping */
background-repeat: round;       /* resize to fit without clipping */
background-repeat: repeat no-repeat; /* x then y */

background-attachment: scroll;  /* default — scrolls with element */
background-attachment: fixed;   /* fixed to viewport (parallax) */
background-attachment: local;   /* scrolls with element content */

/* background-clip: where background is painted */
background-clip: border-box;   /* default — extends under border */
background-clip: padding-box;  /* stops at border */
background-clip: content-box;  /* inside padding only */
background-clip: text;         /* clips to text shape (needs -webkit- in some) */
-webkit-background-clip: text;
color: transparent;            /* pair with clip: text for gradient text */

/* background-origin: where 0% 0% position starts */
background-origin: padding-box; /* default */
background-origin: border-box;
background-origin: content-box;

/* image position/size repeat attachment origin clip color */
background: url("img.png") center / cover no-repeat fixed padding-box #f0f0f0;

/* Multiple layers (comma-separated) */
background:
  url("overlay.png") top left no-repeat,
  url("base.jpg") center / cover no-repeat;

background: linear-gradient(red, blue);                  /* top to bottom */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to bottom right, red, yellow, blue);
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
background: linear-gradient(to right, red 0 50%, blue 50% 100%);   /* v4 syntax */
background: linear-gradient(in oklch, red, blue);        /* color interpolation */

background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at center, red, blue);
background: radial-gradient(circle at 20% 40%, white 10%, transparent 70%);
background: radial-gradient(closest-side circle at 50% 50%, red, blue);
/* size: closest-side | farthest-side | closest-corner | farthest-corner */

background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 0deg at center, red 0deg 90deg, blue 90deg 180deg);
/* pie chart example */
background: conic-gradient(
  #4caf50 0% 40%,
  #2196f3 40% 70%,
  #ff5722 70% 100%
);

background: repeating-linear-gradient(45deg, #fff 0 10px, #f0f0f0 10px 20px);
background: repeating-radial-gradient(circle, red 0 5px, white 5px 10px);
background: repeating-conic-gradient(#fff 0deg 30deg, #ccc 30deg 60deg);

filter: blur(4px);
filter: brightness(1.5);       /* > 1 brighter, < 1 darker */
filter: contrast(2);
filter: grayscale(1);          /* 0–1 */
filter: hue-rotate(90deg);
filter: invert(1);
filter: opacity(0.5);
filter: saturate(2);
filter: sepia(0.5);
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); /* unlike box-shadow, respects alpha */

/* Multiple filters */
filter: grayscale(0.5) brightness(1.2) blur(2px);

/* On hover transition */
img { filter: none; transition: filter 0.3s; }
img:hover { filter: brightness(1.1); }

/* Glass effect — applies filter to content behind the element */
.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) brightness(1.1);
  -webkit-backdrop-filter: blur(10px) brightness(1.1);
}

.overlay {
  mix-blend-mode: multiply;
  mix-blend-mode: screen;
  mix-blend-mode: overlay;
  mix-blend-mode: darken;
  mix-blend-mode: lighten;
  mix-blend-mode: color-dodge;
  mix-blend-mode: color-burn;
  mix-blend-mode: hard-light;
  mix-blend-mode: soft-light;
  mix-blend-mode: difference;
  mix-blend-mode: exclusion;
  mix-blend-mode: hue;
  mix-blend-mode: saturation;
  mix-blend-mode: color;
  mix-blend-mode: luminosity;
  mix-blend-mode: normal;       /* default */
}

:root { color-scheme: light dark; }     /* opt in to system dark mode */
:root { color-scheme: light; }          /* force light */

/* System color keywords (respect OS theme) */
color: Canvas;
color: CanvasText;
color: LinkText;
color: ButtonText;
color: ButtonFace;
color: Highlight;
color: HighlightText;
color: GrayText;

/* Interpolate two colors */
color: color-mix(in oklch, red 40%, blue);
color: color-mix(in srgb, var(--brand) 70%, white);
color: color-mix(in hsl longer hue, red, blue); /* longer hue arc */

@color-profile --brand-cmyk {
  src: url("color-profiles/brand.icc");
}
.brand {
  color: color(--brand-cmyk 0 81 81 30);
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
    forced-color-adjust: none; /* opt-out — use carefully */
  }
}