Box Lab · Visual Playground

1. The Box Model — margin, border, padding, content (colored for clarity)

Margin (outside)

Border

Padding

Content

Margin Border Padding Content

<!-- the four nested layers, outside → in -->
<div class="model">
  <div class="margin-label">Margin (outside)</div>
  <div class="border-layer">Border
    <div class="padding-layer">Padding
      <div class="content-layer">Content</div>
    </div>
  </div>
</div>
/* Four layers, outermost to innermost:
   1. margin  — space OUTSIDE the box
   2. border  — a line around the padding
   3. padding — space INSIDE the box, around content
   4. content — your text, image, children       */
.box {
  margin:  20px;
  border:  2px solid #f97316;
  padding: 30px;
  background: #dcfce7;
}

/* box-sizing: border-box tells the browser
   to include border+padding in the declared width */
* { box-sizing: border-box; }

2. Border Radius — from square to blob with one property

border-radius: 0

8px

20px

50% (circle)

50% 0 50% 0

blob

999px 32px

12 48 12 48

<div class="grid">
  <div class="box r0">border-radius: 0</div>
  <div class="box r1">8px</div>
  <div class="box r2">20px</div>
  <div class="box r3">50% (circle)</div>
  <div class="box r4">50% 0 50% 0</div>
  <div class="box r5">blob</div>
  <div class="box r6">999px 32px</div>
  <div class="box r7">12 48 12 48</div>
</div>
/* Single-value shortcuts */
.r0 { border-radius: 0; }
.r1 { border-radius: 8px; }
.r2 { border-radius: 20px; }

/* 50% + square = circle (add aspect-ratio: 1) */
.r3 { border-radius: 50%; }

/* Per-corner: top-left, top-right, bottom-right, bottom-left */
.r4 { border-radius: 50% 0 50% 0; }

/* Elliptical radii — two values per corner for blob shapes */
.r5 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

/* Pill + square mix — diagonal pairs */
.r6 { border-radius: 999px 32px; }
.r7 { border-radius: 12px 48px 12px 48px; }

3. Box Shadows — the 8 most useful elevation recipes

Hairline0 1px 2px

Subtle0 2px 6px

Card0 4px 14px

Floating0 10px 30px

Dramatic0 20px 60px

Brand glowcolored shadow

Insetinset 0 4px 10px

Layered3 shadows stacked

<div class="grid">
  <div class="box s1"><strong>Hairline</strong>0 1px 2px</div>
  <div class="box s2"><strong>Subtle</strong>0 2px 6px</div>
  <div class="box s3"><strong>Card</strong>0 4px 14px</div>
  <div class="box s4"><strong>Floating</strong>0 10px 30px</div>
  <div class="box s5"><strong>Dramatic</strong>0 20px 60px</div>
  <div class="box s6"><strong>Brand glow</strong>colored shadow</div>
  <div class="box s7"><strong>Inset</strong>inset 0 4px 10px</div>
  <div class="box s8"><strong>Layered</strong>3 shadows stacked</div>
</div>
/* Format: x-offset y-offset blur spread color */

.s1 { box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* hairline */
.s2 { box-shadow: 0 2px 6px rgba(0,0,0,.1); }  /* subtle */
.s3 { box-shadow: 0 4px 14px rgba(0,0,0,.1); } /* card */
.s4 { box-shadow: 0 10px 30px rgba(0,0,0,.15); } /* floating */
.s5 { box-shadow: 0 20px 60px rgba(0,0,0,.2); }  /* dramatic */

/* Brand-colored shadows add warmth and depth */
.s6 { box-shadow: 0 8px 24px rgba(236, 72, 153, .4); }

/* "inset" draws the shadow INSIDE the box */
.s7 { box-shadow: inset 0 4px 10px rgba(0,0,0,.15); }

/* Stack multiple shadows separated by commas for realism */
.s8 {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 2px 4px rgba(0,0,0,.05),
    0 4px 16px rgba(0,0,0,.1);
}

4. Neon Glow — animated box-shadow pulse in each card's own color

pink

blue

cyan

green

amber

purple

<!-- Each box's class sets its own --c color -->
<div class="grid">
  <div class="box b1">pink</div>
  <div class="box b2">blue</div>
  <div class="box b3">cyan</div>
  <div class="box b4">green</div>
  <div class="box b5">amber</div>
  <div class="box b6">purple</div>
</div>
.box {
  animation: neonPulse 3s ease-in-out infinite;
}

/* color-mix() lets the shadow use a transparent tint of --c */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 15px color-mix(in srgb, var(--c) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 40px color-mix(in srgb, var(--c) 70%, transparent);
  }
}

/* Stagger each box's animation-delay so they shimmer in sequence */
.b1 { --c: #ec4899; animation-delay: 0s; }
.b2 { --c: #3b82f6; animation-delay: .6s; }
.b3 { --c: #22d3ee; animation-delay: 1.2s; }
.b4 { --c: #22c55e; animation-delay: 1.8s; }
.b5 { --c: #f59e0b; animation-delay: 2.4s; }
.b6 { --c: #a855f7; animation-delay: 3s; }

5. Gradient Borders — linear, multi-color, conic, and animated

Two-color
linear-gradient

Multi-color
linear-gradient

conic-gradient
rainbow

Animated
flowing gradient

<!-- Outer = gradient, inner = white content -->
<div class="grid">
  <div class="wrap w1"><div class="inner">Two-color linear-gradient</div></div>
  <div class="wrap w2"><div class="inner">Multi-color linear-gradient</div></div>
  <div class="wrap w3"><div class="inner">conic-gradient rainbow</div></div>
  <div class="wrap w4"><div class="inner">Animated flowing gradient</div></div>
</div>
/* The wrapper is the gradient; padding = border thickness */
.wrap {
  padding: 3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.inner {
  background: #fff;
  border-radius: 14px; /* slightly smaller */
  padding: 24px;
}

/* Multi-color linear gradient — add more color stops */
.w2 { background: linear-gradient(135deg, #06b6d4, #22c55e, #f59e0b); }

/* Conic-gradient = rainbow that wraps around */
.w3 { background: conic-gradient(from 0deg, #ec4899, #8b5cf6, #3b82f6, #22c55e, #f59e0b, #ec4899); }

/* Animated gradient: bg-size > 100% + shifting position */
.w4 {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #ec4899);
  background-size: 300% 300%;
  animation: flow 6s linear infinite;
}

@keyframes flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

6. Clip-Path Shapes — turn any box into a triangle, hexagon, star, or blob

triangle

hexagon

star

arrow

chevron

rhombus

tag

hex-v

<div class="grid">
  <div class="shape c-tri">triangle</div>
  <div class="shape c-hex">hexagon</div>
  <div class="shape c-star">star</div>
  <div class="shape c-arrow">arrow</div>
  <div class="shape c-chev">chevron</div>
  <div class="shape c-rhom">rhombus</div>
  <div class="shape c-tag">tag</div>
  <div class="shape" style="clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)">hex-v</div>
</div>
/* clip-path cuts the visible area into any shape
   using percentage-based polygon points         */

.c-tri   { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c-hex   { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.c-arrow { clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%); }
.c-chev  { clip-path: polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%, 0 0); }
.c-rhom  { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Star = 10 points alternating outer/inner radius */
.c-star {
  clip-path: polygon(
    50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

/* Tag = rectangle with one beveled corner */
.c-tag {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}

7. Layered Box — card with a colored shadow "block" behind it (Memphis / brutalist)

Pink shadow

The ::before pseudo-element sits behind the card with a slight offset.

Blue shadow

Works well with bold borders + solid colors for that playful brutalist look.

Green shadow

Change the ::before inset values to make the offset bigger or smaller.

Orange shadow

No box-shadow needed — just a second solid rectangle.

<div class="grid">
  <div class="stack pink">
    <div class="card"><strong>Pink shadow</strong><p>The ::before pseudo-element sits behind the card with a slight offset.</p></div>
  </div>
  <div class="stack blue">
    <div class="card"><strong>Blue shadow</strong><p>Works well with bold borders + solid colors for that playful brutalist look.</p></div>
  </div>
  <div class="stack green">
    <div class="card"><strong>Green shadow</strong><p>Change the ::before inset values to make the offset bigger or smaller.</p></div>
  </div>
  <div class="stack orange">
    <div class="card"><strong>Orange shadow</strong><p>No box-shadow needed — just a second solid rectangle.</p></div>
  </div>
</div>
.stack { position: relative; }

.stack .card {
  background: #fff;
  border: 2px solid #111;
  border-radius: 12px;
  padding: 22px;
  position: relative;
  z-index: 2;
}

/* ::before creates a second colored rectangle BEHIND the card */
.stack::before {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px; /* top right bottom left */
  background: #111;
  border-radius: 12px;
  z-index: 1;
}

/* Swap the shadow block's color per card */
.stack.pink::before   { background: #ec4899; }
.stack.blue::before   { background: #3b82f6; }
.stack.green::before  { background: #10b981; }
.stack.orange::before { background: #f59e0b; }

8. Glass Boxes — frosted backdrop-filter over a colorful background

Light glass

rgba(255,255,255,.1)
blur(20px)

Strong glass

rgba(255,255,255,.25)
blur(20px)

Tinted glass

rgba(236,72,153,.18)
blur(20px)

Round

<!-- Parent needs a colorful / blurry background -->
<div class="scene">
  <div class="glass"><strong>Light glass</strong><p>rgba(255,255,255,.1) blur(20px)</p></div>
  <div class="glass strong"><strong>Strong glass</strong><p>rgba(255,255,255,.25) blur(20px)</p></div>
  <div class="glass tinted"><strong>Tinted glass</strong><p>rgba(236,72,153,.18) blur(20px)</p></div>
  <div class="glass"><strong>Round</strong></div>
</div>
/* Background picks up colors behind the glass */
.scene {
  background:
    radial-gradient(circle at 20% 30%, #ec4899, transparent 50%),
    radial-gradient(circle at 80% 60%, #3b82f6, transparent 50%),
    #6366f1;
}

/* The magic trio: translucent + blur + thin border */
.glass {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
}

/* Variants — bump alpha up for stronger frost, tint with brand color */
.glass.strong { background: rgba(255, 255, 255, .25); }
.glass.tinted { background: rgba(236, 72, 153, .18); }