CSS Recipes — How Do I…? · Visual Playground

Read this first

Every CSS rule answers two questions

If CSS feels like guessing, it's usually because these two halves get tangled. Pull them apart and it gets simple: first you pick the elements, then you pick what changes.

Question 1 — the selector

Which elements?

How you point at the thing you want to style. That's the whole CSS Selectors page.

.hero { … }

Question 2 — the property

What about them changes?

The actual look: width, color, font, spacing… This is what you're really asking about. The recipes below are the map.

{ background: navy; }

So the full rule is: .hero { background: navy; } → "for the element(s) with class hero, set the background to navy." Selector + property. That's all CSS ever is.

How to choose

"What do I want to change?" → which property

You don't memorize properties — you decide what kind of change you want, and that points you to a small group. Here are the six groups that cover almost everything.

Size & layout

widthheightmax-widthdisplayposition

Color & background

colorbackgroundbackground-colorbackground-image

Text & fonts

font-familyfont-sizefont-weighttext-alignline-height

Spacing

marginpaddinggap

Borders & corners

borderborder-radiusbox-shadow

Effects

opacitytransformtransition

Recipe

The recipes

I want my hero to stretch all the way across

Block elements are already full width — so if yours isn't, something is constraining it: a max-width, a centered container, or the body's default margin. Set width to 100%, remove the body margin, and use box-sizing: border-box so padding doesn't push it past the edge.

Constrained (has max-width)

My Hero

Full width (width: 100%)

My Hero — all the way across

/* 1. kill the browser's default body margin */
body { margin: 0; }

/* 2. let the hero fill the full width */
.hero {
  width: 100%;
  padding: 60px 24px;
  box-sizing: border-box;   /* padding stays INSIDE the 100% */
}

Gotcha: if your hero sits inside a centered container like .wrapper { max-width: 1100px; }, it can only be as wide as that wrapper. Move the hero out of the wrapper to go truly edge-to-edge.

I want a different background color for the whole page

Style the body — it's the whole page. Use background-color (or the shorthand background).

#0f172a

#14b8a6

#f59e0b

body {
  background-color: #0f172a;   /* a solid color */
}

/* pick any solid color you like */
body { background-color: #14b8a6; }   /* teal */
body { background-color: #f59e0b; }   /* amber */

/* …or a gradient */
body { background: linear-gradient(135deg, #14b8a6, #3b82f6); }

I want to change the text color

Use color (yes, just color — it always means text color).

This text is teal — color: #5eead4;

This text is amber — color: #f59e0b;

h1   { color: #5eead4; }
.note { color: tomato; }   /* named colors work too */

I want to change the font (the typeface)

Use font-family. The browser only has a handful built in — for anything else, load it first (usually from Google Fonts), then name it. Always list a fallback after it.

sans-serif
The quick brown fox jumps over the lazy dog.

serif
The quick brown fox jumps over the lazy dog.

monospace
The quick brown fox jumps over the lazy dog.

/* the whole page */
body { font-family: 'Inter', system-ui, sans-serif; }

/* a different font just for headings */
h1, h2 { font-family: 'Georgia', serif; }

The 3 generic families: sans-serif (clean, modern), serif (little feet, traditional), monospace (code, fixed-width). Always end your list with one of these as a safety net.

I want to change the font size or make it bold

Size → font-size. Boldness → font-weight (400 normal, 700 bold).

font-size: 0.85rem

font-size: 1.3rem · font-weight: 700

2rem · 800

h1   { font-size: 2rem;   font-weight: 800; }
p    { font-size: 1rem; }     /* 1rem = the base size, ~16px */
small{ font-size: 0.85rem; }

I want to center something

Centering text → text-align: center. Centering a box horizontally → margin: 0 auto (needs a width). Centering anything both ways → flexbox.

Flexbox — centered both directions

Centered

/* center text */
.title { text-align: center; }

/* center a box left-to-right */
.box { width: 300px; margin: 0 auto; }

/* center anything, both directions */
.parent {
  display: flex;
  justify-content: center;   /* left ↔ right */
  align-items: center;       /* top ↕ bottom */
}

I want to add space (padding vs margin)

The classic confusion. padding = space inside an element (between its edge and its content). margin = space outside (between it and its neighbors). The demo shows both.

padding (inside)

content

margin (outside, pink)

box

.card {
  padding: 20px;   /* breathing room INSIDE the card */
  margin:  16px;   /* gap OUTSIDE, away from other cards */
}

/* one side only */
.card { margin-top: 40px; padding-left: 12px; }

I want rounded corners and a shadow

Rounded corners → border-radius. Drop shadow → box-shadow. Together they make a "card."

A card: border-radius + box-shadow.

.card {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  /*           x  y   blur  color            */
}

I want my image to fit (not overflow)

Cap it at the width of its container with max-width: 100% and keep its shape with height: auto.

img {
  max-width: 100%;   /* never wider than its container */
  height: auto;      /* keep the aspect ratio */
  display: block;
}

More recipes

More everyday "how do I…?"

Short answers with the exact CSS. Where a full interactive lab exists, a link takes you deeper.

Change a link's color

Style the a tag with color; use :hover for the rollover and text-decoration to control the underline.

a        { color: #14b8a6; text-decoration: none; }
a:hover  { color: #0ea5e9; text-decoration: underline; }
a:visited{ color: #8b5cf6; }

Style my headings

Give headings a clear size scale and weight so the page has hierarchy. Deeper: Text Lab and Fonts.

h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.1; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; color: #94a3b8; }

Make a callout / notice box

A colored left border + tinted background makes text "pop" as a tip or warning. Deeper: Make Words Visual.

.callout {
  border-left: 4px solid #14b8a6;
  background: rgba(20,184,166,.1);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
}

Style a quote

Indent it, italicize it, and add a big quote mark with ::before. Deeper: Make Words Visual.

blockquote {
  border-left: 4px solid #8b5cf6;
  padding-left: 18px;
  font-style: italic;
  color: #cbd5e1;
}

Add a background image

Use background with center / cover so it fills nicely. Add a dark overlay so text on top stays readable.

.hero {
  background: url("photo.jpg") center / cover no-repeat;
}
/* readable text: layer a dark gradient on top */
.hero {
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("photo.jpg") center/cover;
}

Create a gradient

linear-gradient() for a direction, radial-gradient() for a glow. Deeper: Color.

.bar  { background: linear-gradient(135deg, #14b8a6, #3b82f6); }
.glow { background: radial-gradient(circle at 30% 30%, #8b5cf6, transparent); }
/* gradient text */
.title { background: linear-gradient(90deg,#14b8a6,#ec4899);
  -webkit-background-clip: text; color: transparent; }

Create hover effects

Add transition for smoothness, then change something on :hover. Deeper: Microinteractions & Animation.

.card {
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

Create shadows & depth

Layer two box-shadows — a tight one and a soft wide one — for realistic depth. Deeper: Box Lab & Neumorphism.

.elevated {
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),    /* close, sharp */
    0 12px 32px rgba(0,0,0,.35);  /* far, soft */
}

Style images

Crop to a shape with object-fit: cover, lock the shape with aspect-ratio, round with border-radius. Deeper: Media & Gallery.

.avatar {
  width: 80px; aspect-ratio: 1;   /* perfect square */
  object-fit: cover;                /* crop, don't squish */
  border-radius: 50%;               /* circle */
}

Create dark mode

Store colors in CSS variables, then flip them when a .dark class is on the page. Toggle the class with JS — see Interactive Effects.

:root      { --bg: #fff; --text: #111; }
.dark      { --bg: #0a0a0a; --text: #f5f5f7; }

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

Glassmorphism & modern effects

The frosted-glass look: a semi-transparent background plus backdrop-filter: blur() and a thin light border.

.glass {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
}

Build a component

Bigger building blocks → full labs

These are whole patterns, each with its own interactive lab. Open the lab to see live variations and copy the complete code.

Layouts

Position elements with flow, flexbox, and grid.

Layout · Flexbox · Grid →

Responsive sites

Media queries & fluid units so it works on any screen.

Responsive Web Design →

Navigation menus

Navbars, dropdowns, and mobile drawers.

Navigation Lab →

Hero sections

Big landing headers that grab attention.

Hero Lab →

Buttons

Every button style, size, and state.

Button Lab →

Modern cards

Product, profile, and content cards.

Cards Lab →

Forms

Inputs, labels, validation, and layout.

Forms Lab →

Photo galleries

Grids, masonry, and lightbox patterns.

Gallery Lab →

Modals

Pop-up dialogs and overlays.

Modal Lab →

Animations

Transitions, keyframes, and motion.

Animation · GSAP · Effects →

Visual identities

Create an entire look & feel

A "visual identity" is just a consistent recipe of fonts + colors + spacing + effects. Pick a vibe below and mix its ingredients. Tools: Color, Fonts, and Design Principles.

Apple-style minimalist

Lots of whitespace, clean system/sans fonts, near-monochrome with one blue accent, huge headings, subtle shadows. Less is more.

Gaming

Dark background, neon accents, bold angular fonts, glows (box-shadow + text-shadow), sharp edges.

Retro

Warm, muted palettes, serif or script fonts, grain/texture, rounded retro shapes, drop shadows offset hard.

Futuristic

Glassmorphism & gradients, thin light fonts, glowing accents, lots of blur and translucency.

Corporate

Navy/blue + grey, clean readable sans, strict grid alignment, restrained color, professional and trustworthy.

Artistic

Expressive & asymmetric, bold clashing color, mixed typefaces, overlapping elements, breaks the grid on purpose.

Multimedia-heavy

Full-bleed video & imagery, text overlays on dark gradients, big type. See Video & Multimedia and Media.

Going further

What advanced things can CSS (+ a little JS) do?

Once the basics click, these are the impressive effects you can build. Each links to where to learn it.

Parallax scrolling

Layers move at different speeds as you scroll for depth.

GSAP · Effects →

Animated gradients

Shift a gradient's position with @keyframes.

Animation →

Loading screens

Spinners, skeletons, and progress animations.

Microinteractions →

Timelines

Vertical/horizontal step timelines.

Timeline Lab →

Responsive dashboards

Grid layouts of stats, charts, and panels.

Dashboard Lab →

Interactive infographics

Animated SVG shapes, charts, and diagrams.

SVG Lab →

Scroll-triggered effects

Reveal & animate elements as they enter view.

Interactive Effects →

Quick lookup

"I want to…" → property

When you're stuck, scan this. Find your goal on the left; the property is on the right.

I want to…	Use
Make something full width	`width: 100%` (+ `box-sizing: border-box`)
Set the whole page's background	`body { background: … }`
Change text color	`color`
Change the font / typeface	`font-family`
Make text bigger / smaller	`font-size`
Make text bold	`font-weight: 700`
Center text	`text-align: center`
Center a box horizontally	`margin: 0 auto` (needs a width)
Center anything both ways	`display: flex; justify-content: center; align-items: center`
Add space inside an element	`padding`
Add space outside an element	`margin`
Space out items in a row/grid	`gap`
Round the corners	`border-radius`
Add a shadow	`box-shadow`
Add a line/outline around it	`border`
Make an image fit	`max-width: 100%; height: auto`
Lay items in a row that wraps	`display: flex; flex-wrap: wrap`
Make a grid of columns	`display: grid; grid-template-columns`
Hide something	`display: none`
Animate a hover change	`transition`

Two pages, one skill. Use CSS Selectors to point at the right element, and this page to pick the property. For deeper detail on each property, see Detailed CSS; for layout, Layout, Flexbox, and Grid.

CSS Recipes — how do I…?

Four CSS pages — which one do you need?

Every CSS rule answers two questions

Which elements?

What about them changes?

"What do I want to change?" → which property

Size & layout

Color & background

Text & fonts

Spacing

Borders & corners

Effects

The recipes

More everyday "how do I…?"

Bigger building blocks → full labs

Layouts

Responsive sites

Navigation menus

Hero sections

Buttons

Modern cards

Forms

Photo galleries

Modals

Animations

Create an entire look & feel

Apple-style minimalist

Gaming

Retro

Futuristic

Corporate

Artistic

Multimedia-heavy

What advanced things can CSS (+ a little JS) do?

Parallax scrolling

Animated gradients

Loading screens

Timelines

Responsive dashboards

Interactive infographics

Scroll-triggered effects

"I want to…" → property