Lab

Box Lab

Everything you can do to a rectangle — the box model, shadows, border-radius shapes, clip-path, neon glows, and glass.

1. The Box Model — margin, border, padding, content (colored for clarity)
Margin (outside)
Border
Padding
Content
Margin Border Padding Content 
<div class="box">Content</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="box"></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="box s1">Card content</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 sets its own --c -->
<div class="box" style="--c: #ec4899"></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; }
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="wrap">
  <div class="inner">Your content</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;
}

/* 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="shape c-tri"></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%); }

/* 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="stack pink">
  <div class="card">Content</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: #ec4899;
  border-radius: 12px;
  z-index: 1;
}
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">Your content</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); }