Colors, Backgrounds, and Visual Effects

1. Modern Color Spaces and Wide Gamut

Color Space	Syntax	Gamut	Description
RGB	`rgb(255 0 0)`	sRGB	Standard RGB, comma-optional syntax
HSL	`hsl(0 100% 50%)`	sRGB	Hue, Saturation, Lightness
HWB	`hwb(0 0% 0%)`	sRGB	Hue, Whiteness, Blackness
LAB	`lab(50% -50 50)`	Wide gamut	Lightness, A-axis (green-red), B-axis (blue-yellow)
LCH	`lch(50% 50 180)`	Wide gamut	Lightness, Chroma, Hue (polar LAB)
OKLab	`oklab(0.5 -0.1 0.1)`	Wide gamut	Perceptually uniform LAB variant
OKLCH	`oklch(0.5 0.14 180)`	Wide gamut	Perceptually uniform LCH variant
Display P3	`color(display-p3 1 0 0)`	P3 (wider)	Apple/modern displays, 25% more colors than sRGB
Rec2020	`color(rec2020 1 0 0)`	Rec.2020	HDR/UHD TV standard, wider than P3

Alpha Channel	Syntax	Description	Example
RGB Alpha	`rgb(255 0 0 / 0.5)`	RGB with alpha (0-1 or 0%-100%)	50% transparent red
HSL Alpha	`hsl(0 100% 50% / 0.5)`	HSL with alpha	50% transparent red
LAB Alpha	`lab(50% -50 50 / 0.5)`	LAB with alpha	50% transparent color
Legacy rgba()	`rgba(255, 0, 0, 0.5)`	Older syntax with commas (still works)	50% transparent red

Example: Modern color syntax

/* Modern space-separated syntax (no commas) */
.red {
    background: rgb(255 0 0);
    background: hsl(0 100% 50%);
    background: hwb(0 0% 0%);
}

/* Alpha channel with slash */
.transparent-red {
    background: rgb(255 0 0 / 0.5);
    background: hsl(0 100% 50% / 50%);
}

/* Wide gamut colors (modern displays) */
.vibrant-red {
    /* sRGB fallback */
    background: rgb(255 0 0);
    /* P3 for modern displays (25% wider gamut) */
    background: color(display-p3 1 0 0);
}

/* Perceptually uniform colors (OKLCH) */
.oklch-color {
    /* Best for consistent lightness across hues */
    background: oklch(0.7 0.2 180);  /* L=70%, C=0.2, H=180deg */
}

/* LAB for consistent lightness */
.lab-color {
    background: lab(70% -50 50);  /* L=70%, a=-50, b=50 */
}

Example: Color space comparison

/* HSL - intuitive but not perceptually uniform */
.hsl-gradient {
    /* Lightness 50% but appears different across hues */
    background: linear-gradient(
        to right,
        hsl(0 100% 50%),    /* Red looks darker */
        hsl(120 100% 50%),  /* Green looks lighter */
        hsl(240 100% 50%)   /* Blue looks darker */
    );
}

/* OKLCH - perceptually uniform lightness */
.oklch-gradient {
    /* Consistent perceived brightness at L=0.7 */
    background: linear-gradient(
        to right,
        oklch(0.7 0.25 0),     /* Red */
        oklch(0.7 0.25 120),   /* Green */
        oklch(0.7 0.25 240)    /* Blue */
    );
}

/* P3 for vibrant colors on modern displays */
@supports (color: color(display-p3 1 0 0)) {
    .vibrant {
        background: color(display-p3 1 0.2 0.5);
    }
}

/* Fallback pattern */
.color-with-fallback {
    background: rgb(255 0 0);  /* sRGB fallback */
    background: oklch(0.6 0.3 20);  /* Modern color space */
}

Note: OKLCH is recommended for perceptually uniform colors. Display P3 provides 25% more colors than sRGB on modern displays. Browser support: Chrome 111+, Safari 15+, Firefox 113+

2. CSS Color Functions and Manipulation

Function	Syntax	Description	Use Case
color-mix()	`color-mix(in space, color1 amount, color2)`	Mix two colors in specified color space	Blend colors, tints, shades
color-contrast()	`color-contrast(bg vs color1, color2)`	Choose highest contrast color	Accessibility, dynamic text colors
light-dark()	`light-dark(light-color, dark-color)`	Color based on color-scheme	Light/dark mode theming
Relative colors	`rgb(from base-color r g b / alpha)`	Derive color from another color	Generate color variants
currentColor	`currentColor`	Inherit current text color	SVG, borders matching text
transparent	`transparent`	Fully transparent (rgba(0,0,0,0))	Hiding elements, gradients

Example: color-mix() function

/* Mix two colors 50/50 */
.mixed {
    background: color-mix(in srgb, red, blue);  /* Purple */
}

/* Mix with different percentages */
.tinted {
    background: color-mix(in srgb, red 80%, white);  /* Light red tint */
}

/* Mix in perceptually uniform space */
.uniform-mix {
    background: color-mix(in oklch, red, blue);  /* Better perceived mix */
}

/* Create tints and shades */
:root {
    --primary: oklch(0.6 0.25 260);
    --primary-light: color-mix(in oklch, var(--primary) 50%, white);
    --primary-dark: color-mix(in oklch, var(--primary) 80%, black);
}

/* Transparent variants */
.transparent-variant {
    --base: rgb(255 0 0);
    --semi-transparent: color-mix(in srgb, var(--base) 50%, transparent);
}

/* Color palette generation */
.palette {
    --base: oklch(0.6 0.2 180);
    --tint-1: color-mix(in oklch, var(--base) 90%, white);
    --tint-2: color-mix(in oklch, var(--base) 70%, white);
    --shade-1: color-mix(in oklch, var(--base) 90%, black);
    --shade-2: color-mix(in oklch, var(--base) 70%, black);
}

Example: Relative colors and color manipulation

/* Relative color syntax (derive from base color) */
:root {
    --primary: oklch(0.6 0.2 260);
}

/* Lighten by increasing lightness */
.lighter {
    background: oklch(from var(--primary) calc(l + 0.2) c h);
}

/* Darken by decreasing lightness */
.darker {
    background: oklch(from var(--primary) calc(l - 0.2) c h);
}

/* Adjust alpha */
.semi-transparent {
    background: oklch(from var(--primary) l c h / 0.5);
}

/* Rotate hue */
.complementary {
    background: oklch(from var(--primary) l c calc(h + 180deg));
}

/* RGB relative colors */
.rgb-variant {
    --base: rgb(100 150 200);
    /* Increase red channel */
    background: rgb(from var(--base) calc(r + 50) g b);
}

/* HSL relative colors */
.hsl-variant {
    --base: hsl(200 50% 50%);
    /* Increase saturation */
    background: hsl(from var(--base) h calc(s + 20%) l);
}

Example: light-dark() and currentColor

/* Automatic light/dark mode colors */
:root {
    color-scheme: light dark;
}

.adaptive {
    background: light-dark(white, #1a1a1a);
    color: light-dark(#1a1a1a, white);
}

/* Use with custom properties */
:root {
    --bg: light-dark(#ffffff, #0a0a0a);
    --text: light-dark(#1a1a1a, #f0f0f0);
}

/* currentColor inherits text color */
.icon {
    color: blue;
    border: 2px solid currentColor;  /* Blue border */
}

.icon svg {
    fill: currentColor;  /* SVG inherits text color */
}

/* Useful for focus rings */
button {
    color: white;
    background: blue;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

button:focus-visible {
    outline-color: currentColor;  /* White outline */
}

Note: color-mix() support: Chrome 111+, Safari 16.2+, Firefox 113+. Relative color syntax: Chrome 119+, Safari 16.4+. Use in oklch for perceptually uniform mixing.

3. Background Properties and Multiple Backgrounds

Property	Values	Description	Default
background-color	`color`	Background color (bottom layer)	`transparent`
background-image	`url() \| gradient \| none`	Background image(s)	`none`
background-position	`x y \| keywords`	Position of background image	`0% 0%`
background-size	`length \| % \| cover \| contain \| auto`	Size of background image	`auto`
background-repeat	`repeat \| no-repeat \| repeat-x \| repeat-y \| space \| round`	How image repeats	`repeat`
background-attachment	`scroll \| fixed \| local`	Scroll behavior	`scroll`
background-origin	`border-box \| padding-box \| content-box`	Positioning area	`padding-box`
background-clip	`border-box \| padding-box \| content-box \| text`	Clipping area	`border-box`
background-blend-mode	`normal \| multiply \| screen \| overlay...`	Blend backgrounds with each other	`normal`
background	`color image position/size repeat attachment origin clip`	Shorthand for all properties	-

Example: Multiple backgrounds

/* Multiple backgrounds (comma-separated, first is top layer) */
.hero {
    background: 
        url('/overlay.png') center/cover no-repeat,
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
        url('/hero-bg.jpg') center/cover no-repeat;
    /* Order: overlay, gradient, image, color */
    background-color: #1a1a1a;
}

/* Individual properties for multiple backgrounds */
.complex {
    background-image: 
        url('/pattern.png'),
        linear-gradient(to right, blue, purple);
    background-position:
        top left,
        center;
    background-size:
        50px 50px,
        cover;
    background-repeat:
        repeat,
        no-repeat;
}

/* Background positioning keywords */
.positioned {
    background-position: top right;  /* Keywords */
    background-position: center center;  /* Centered */
    background-position: 10px 20px;  /* Offset from top-left */
    background-position: right 10px bottom 20px;  /* Offset from edges */
}

/* Background size */
.sized {
    background-size: cover;  /* Fill, may crop */
    background-size: contain;  /* Fit, may show space */
    background-size: 100% 100%;  /* Stretch to fit */
    background-size: auto 200px;  /* Auto width, fixed height */
}

Example: Background clipping and effects

/* Clip background to text (webkit prefix required) */
.text-gradient {
    background: linear-gradient(45deg, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;  /* Fallback */
}

/* Background origin and clip */
.bordered-box {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background: url('/pattern.png');
    background-origin: content-box;  /* Start from content area */
    background-clip: padding-box;  /* Clip at padding edge */
}

/* Fixed background (parallax effect) */
.parallax {
    background-image: url('/bg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Background repeat options */
.repeat-options {
    background-repeat: space;  /* Space evenly, no partial images */
    background-repeat: round;  /* Stretch to fit, no partial images */
}

/* Background blend modes */
.blended {
    background-image: 
        url('/overlay.png'),
        url('/base.jpg');
    background-blend-mode: multiply;  /* Blend layers together */
}

4. CSS Gradients (linear, radial, conic)

Gradient Type	Syntax	Description	Use Case
Linear	`linear-gradient(direction, color1, color2)`	Gradient in straight line	Backgrounds, overlays
Radial	`radial-gradient(shape at position, colors)`	Gradient from center point	Spotlights, buttons
Conic	`conic-gradient(from angle at position, colors)`	Gradient rotating around center	Pie charts, color wheels
Repeating Linear	`repeating-linear-gradient(direction, colors)`	Repeating linear pattern	Stripes, patterns
Repeating Radial	`repeating-radial-gradient(shape, colors)`	Repeating radial pattern	Circular patterns
Repeating Conic	`repeating-conic-gradient(from angle, colors)`	Repeating conic pattern	Sunburst, radar patterns

Example: Linear gradients

/* Basic linear gradient (top to bottom) */
.linear-basic {
    background: linear-gradient(red, blue);
}

/* With direction */
.linear-direction {
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(to bottom right, red, blue);
    background: linear-gradient(45deg, red, blue);
}

/* Multiple color stops */
.linear-stops {
    background: linear-gradient(
        to right,
        red 0%,
        yellow 25%,
        green 50%,
        blue 75%,
        purple 100%
    );
}

/* Color stop positions */
.linear-positioned {
    background: linear-gradient(
        to right,
        red 0 20%,      /* Red from 0-20% */
        yellow 20% 40%, /* Yellow from 20-40% */
        green 40% 60%,  /* Green from 40-60% */
        blue 60% 80%,   /* Blue from 60-80% */
        purple 80% 100% /* Purple from 80-100% */
    );
}

/* Hard color stops (no gradient) */
.stripes {
    background: linear-gradient(
        90deg,
        red 0 33.33%,
        white 33.33% 66.66%,
        blue 66.66% 100%
    );
}

/* Transparent gradients */
.overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.7) 100%
    );
}

Example: Radial and conic gradients

/* Basic radial gradient (circle from center) */
.radial-basic {
    background: radial-gradient(circle, red, blue);
}

/* Ellipse with position */
.radial-positioned {
    background: radial-gradient(
        ellipse at top right,
        red, blue
    );
}

/* Sized radial gradient */
.radial-sized {
    background: radial-gradient(
        circle 100px at center,
        red, transparent
    );
}

/* Radial size keywords */
.radial-keywords {
    background: radial-gradient(circle closest-side, red, blue);
    /* closest-side, closest-corner, farthest-side, farthest-corner */
}

/* Conic gradient (color wheel) */
.conic-basic {
    background: conic-gradient(red, yellow, green, blue, purple, red);
}

/* Conic with start angle */
.conic-rotated {
    background: conic-gradient(from 45deg, red, blue);
}

/* Conic positioned */
.conic-positioned {
    background: conic-gradient(
        from 0deg at 25% 25%,
        red, yellow, green, blue, purple, red
    );
}

/* Pie chart with conic gradient */
.pie-chart {
    background: conic-gradient(
        red 0deg 120deg,
        yellow 120deg 180deg,
        green 180deg 360deg
    );
    border-radius: 50%;
}

Example: Repeating gradients and patterns

/* Repeating linear stripes */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #fff 0px,
        #fff 10px,
        #000 10px,
        #000 20px
    );
}

/* Vertical bars */
.bars {
    background: repeating-linear-gradient(
        90deg,
        red 0 20px,
        blue 20px 40px
    );
}

/* Repeating radial circles */
.circles {
    background: repeating-radial-gradient(
        circle at center,
        red 0 10px,
        blue 10px 20px
    );
}

/* Repeating conic rays */
.sunburst {
    background: repeating-conic-gradient(
        from 0deg,
        red 0deg 10deg,
        yellow 10deg 20deg
    );
}

/* Checkerboard pattern */
.checkerboard {
    background: 
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0;
    background-color: white;
}

5. CSS Filters and Backdrop Filters

Filter Function	Syntax	Description	Range
blur()	`blur(5px)`	Gaussian blur	0 to ∞
brightness()	`brightness(1.5)`	Adjust brightness	0 to ∞ (1 = normal)
contrast()	`contrast(2)`	Adjust contrast	0 to ∞ (1 = normal)
grayscale()	`grayscale(100%)`	Convert to grayscale	0% to 100%
hue-rotate()	`hue-rotate(90deg)`	Rotate hue	0deg to 360deg
invert()	`invert(100%)`	Invert colors	0% to 100%
opacity()	`opacity(50%)`	Adjust opacity	0% to 100%
saturate()	`saturate(2)`	Adjust saturation	0 to ∞ (1 = normal)
sepia()	`sepia(100%)`	Apply sepia tone	0% to 100%
drop-shadow()	`drop-shadow(4px 4px 8px black)`	Drop shadow (follows alpha channel)	offset-x offset-y blur color
url()	`url(#svg-filter)`	SVG filter reference	SVG filter ID

Example: CSS filters

/* Single filter */
img {
    filter: blur(5px);
    filter: brightness(1.2);
    filter: contrast(1.5);
    filter: grayscale(100%);
}

/* Multiple filters (space-separated) */
.filtered {
    filter: brightness(1.2) contrast(1.1) saturate(1.3);
}

/* Hover effects */
img {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

img:hover {
    filter: grayscale(0%);
}

/* Photo effects */
.vintage {
    filter: sepia(80%) contrast(1.2) brightness(1.1);
}

.vibrant {
    filter: saturate(1.5) contrast(1.1);
}

.dark {
    filter: brightness(0.7) contrast(1.2);
}

/* Drop shadow for transparent images */
.icon {
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    /* Better than box-shadow for non-rectangular shapes */
}

/* Invert for dark mode */
@media (prefers-color-scheme: dark) {
    img {
        filter: invert(1) hue-rotate(180deg);
    }
}

Example: Backdrop filters (frosted glass effect)

/* Frosted glass effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modal overlay with blur */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* Navigation with backdrop blur */
.navbar {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark glass */
.dark-glass {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) brightness(0.8);
}

/* Browser support with fallback */
.glass-with-fallback {
    background: rgba(255, 255, 255, 0.9);  /* Fallback */
}

@supports (backdrop-filter: blur(10px)) {
    .glass-with-fallback {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
}

Warning: Filters and backdrop-filter can be performance intensive. Use sparingly, especially blur() with large radius. backdrop-filter support: All modern browsers (Safari requires -webkit- prefix).

6. Blend Modes and Compositing

Blend Mode	Effect	Use Case
normal	No blending (default)	Default behavior
multiply	Darkens (multiplies colors)	Shadows, darkening
screen	Lightens (inverted multiply)	Highlights, lightening
overlay	Multiply + screen (contrast)	Enhance contrast
darken	Keeps darkest color	Darkening effects
lighten	Keeps lightest color	Lightening effects
color-dodge	Brightens (divides inverse)	Glowing effects
color-burn	Darkens (divides)	Burning effects
hard-light	Strong overlay effect	Strong contrast
soft-light	Subtle overlay effect	Subtle contrast
difference	Subtracts colors	Inversion effects
exclusion	Similar to difference, softer	Subtle inversion
hue	Uses hue of top layer	Colorize
saturation	Uses saturation of top layer	Adjust vibrancy
color	Uses hue & saturation of top	Recolor
luminosity	Uses luminosity of top layer	Brightness adjustments

Example: mix-blend-mode (element with background)

/* Blend element with background */
.blend-multiply {
    mix-blend-mode: multiply;  /* Darkens */
}

.blend-screen {
    mix-blend-mode: screen;  /* Lightens */
}

/* Text blend effect */
.text-blend {
    font-size: 5rem;
    font-weight: 900;
    color: white;
    mix-blend-mode: difference;  /* Inverts background */
}

/* Image overlay blend */
.image-overlay {
    position: relative;
}

.image-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, red, blue);
    mix-blend-mode: overlay;  /* Colorize image */
}

/* Duotone effect */
.duotone {
    position: relative;
}

.duotone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff00ff;
    mix-blend-mode: darken;
}

.duotone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #00ffff;
    mix-blend-mode: lighten;
}

Example: background-blend-mode (multiple backgrounds)

/* Blend background layers together */
.blended-bg {
    background-image: 
        url('/texture.png'),
        linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
        url('/photo.jpg');
    background-blend-mode: overlay, normal, normal;
}

/* Gradient overlay on image */
.gradient-overlay {
    background: 
        linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)),
        url('/image.jpg') center/cover;
    background-blend-mode: multiply;
}

/* Color tint on image */
.color-tint {
    background: 
        linear-gradient(rgba(255, 0, 100, 0.5), rgba(255, 0, 100, 0.5)),
        url('/photo.jpg') center/cover;
    background-blend-mode: color;  /* Colorize image */
}

/* Multiple blend modes */
.complex-blend {
    background: 
        url('/texture.png'),
        url('/pattern.png'),
        url('/base.jpg');
    background-blend-mode: overlay, multiply;
    /* First blend mode: texture + pattern */
    /* Second blend mode: result + base */
}

/* Luminosity blend for contrast */
.luminosity-blend {
    background:
        linear-gradient(white, black),
        url('/photo.jpg') center/cover;
    background-blend-mode: luminosity;
}

Example: Isolation and stacking context

/* Isolation creates new stacking context */
.isolated {
    isolation: isolate;
    /* Prevents blend modes from affecting parent */
}

/* Blend only within container */
.container {
    isolation: isolate;
    background: white;
}

.container .blend-child {
    mix-blend-mode: multiply;
    /* Only blends with siblings, not parent background */
}

/* Creative text effects */
.creative-text {
    position: relative;
    background: url('/bg.jpg') center/cover;
}

.creative-text h1 {
    font-size: 8rem;
    font-weight: 900;
    color: white;
    mix-blend-mode: difference;  /* Creates knockout effect */
}

/* Hover blend transition */
.card {
    background: linear-gradient(45deg, red, blue);
    transition: all 0.3s;
}

.card img {
    mix-blend-mode: normal;
    transition: mix-blend-mode 0.3s;
}

.card:hover img {
    mix-blend-mode: multiply;
}

Colors & Backgrounds Best Practices

Use OKLCH for perceptually uniform colors and gradients
Use color-mix() to generate color palettes from base colors
Provide sRGB fallbacks for wide-gamut colors (Display P3, LAB, OKLCH)
Use background-clip: text for gradient text effects
Optimize gradients: use color interpolation in oklch for smooth transitions
Use backdrop-filter sparingly (performance impact)
Test blend modes in isolation: isolate containers for predictable results
Use drop-shadow() filter instead of box-shadow for transparent images
Combine multiple backgrounds for complex effects (textures + gradients + images)

Related Cheatsheets

Frontend