Agence WagnerAgence Wagner
FRENDEELS
Back to designs
ArtisanalTextureMinimalisteClair
Preview

Paper Cut Design Reference

Overview

Paper Cut is a design aesthetic that simulates the look and feel of hand-cut paper art translated into digital interfaces. Rooted in centuries-old paper cutting traditions -- from Chinese jianzhi and Polish wycinanki to Japanese kirigami and German scherenschnitte -- this style leverages layered, stacked shapes with carefully orchestrated shadows to create tactile, three-dimensional depth on flat screens. Each element appears to be a discrete sheet of colored paper, physically elevated above the layers beneath it, casting realistic shadows that establish a clear spatial hierarchy.

The aesthetic emerged as a significant graphic design trend in the late 2010s and has continued to evolve, appearing in product landing pages, children's brand identities, editorial illustration, greeting card design, and immersive hero sections. Its appeal lies in the warmth and approachability of handmade craft combined with clean, geometric precision. Unlike skeuomorphism, which attempts photorealistic simulation of materials, Paper Cut embraces an obviously stylized, illustrative quality -- surfaces read as construction paper, not marble or leather. Colors tend to be bold yet slightly muted, evoking the natural pigmentation of dyed cardstock rather than digital neons.

In web and UI design, the Paper Cut aesthetic translates through multiple stacked box-shadow layers, clip-path silhouettes, layered z-index compositions, and subtle gradient overlays that suggest the way light falls across paper edges. Wavy or organic section dividers replace hard horizontal lines, making page transitions feel like one paper layer peeling away to reveal the next. Illustrations built from overlapping colored shapes -- mountains, clouds, cityscapes, foliage -- serve as hero backgrounds, replacing photography with a warmer, more whimsical visual language.

The style works particularly well for brands that want to communicate creativity, craftsmanship, approachability, and a handmade sensibility without sacrificing modern polish. It pairs naturally with bold sans-serif typography and generous whitespace, allowing the layered depth effects to breathe rather than compete for attention.

Visual Characteristics

Core Design Traits

  • Stacked paper layers -- multiple overlapping shapes at different z-depths create a tangible sense of elevation and physical hierarchy
  • Layered drop shadows -- each paper tier casts a soft, realistic shadow onto the layer beneath it, reinforcing the illusion of physical separation
  • Bold, flat color fills -- shapes use solid, saturated colors reminiscent of construction paper or dyed cardstock rather than gradients or photographic textures
  • Organic silhouette edges -- wavy, curved, or irregularly cut contours define layer boundaries, mimicking hand-cut paper shapes
  • Craft-inspired illustrations -- scenery, characters, and decorative elements are composed from overlapping paper-like shapes (mountains, trees, clouds, animals)
  • Subtle paper texture -- faint grain or fiber overlay on surfaces suggests the tactile quality of real paper stock
  • Dimensional typography -- letterforms appear cut from paper, sometimes with shadow offsets or layered color behind them to suggest physical depth
  • Section dividers as terrain -- wavy SVG or clip-path borders between page sections look like one paper sheet laid atop another
  • Limited depth palette -- typically three to five visible layers of depth, enough to feel dimensional without becoming chaotic
  • Rounded, soft geometry -- corners and edges tend toward gentle curves rather than harsh right angles, maintaining the handmade quality
  • Negative space as a design element -- cut-away areas reveal underlying layers or background colors, echoing the subtractive nature of paper cutting

Design Principles

  • Depth should feel physically plausible -- shadow distances and blur radii must correspond to the implied elevation of each layer
  • Each layer should read as a single, flat sheet of colored paper with no internal gradients (gradients appear only where light falls across edges)
  • Maintain a consistent light source direction across all elements so shadows align coherently
  • Use color contrast between adjacent layers to ensure clear visual separation at every depth level
  • Illustrations should be constructed from simple, overlapping shapes rather than detailed linework
  • Whitespace is essential -- paper layers need room to cast their shadows and establish spatial relationships
  • Animation, when present, should mimic physical paper motion: gentle lifting, settling, or peeling rather than digital effects like fading or morphing
  • Accessibility remains paramount -- ensure text contrast meets WCAG AA standards even when placed on colored paper layers

Color Palette

Paper Cut palettes draw from the natural pigmentation of craft paper, construction paper, and specialty cardstock. Colors are bold but slightly desaturated, warm but never neon. The palette typically includes a light background (the "table" or "backing board"), several mid-tone layer colors, and a few accent shades for detail and emphasis.

Swatch Hex Role/Usage
Cream Canvas #FAF3E8 Base background, the surface beneath all layers
Kraft Brown #C9A96E Secondary background, exposed underlayer, earthy grounding
Paper White #F5F0EB Top-level card surfaces, clean foreground panels
Sky Blue #6BAFE2 Sky layers in illustrations, calm accent, link color
Forest Green #3D8B5F Foliage, nature layers, success states
Goldenrod #E8B84B Warm accent, highlights, call-to-action elements
Terracotta #C85A3A Bold accent, buttons, energetic layer
Dusty Rose #D4808A Soft accent, decorative layers, secondary buttons
Deep Navy #2A3D5C Text color, dark layer elements, contrast
Sage Green #8DB48E Mid-tone foliage, subtle backgrounds, tags
Sunset Orange #E8844A Warm mid-accent, illustration details
Cloud Lavender #B8A9D4 Soft accent, decorative background layers
Charcoal Paper #3E4147 Dark text, shadow-heavy elements
Soft Coral #F0A898 Light warm accent, hover states
Pine Dark #2D5E45 Deep green contrast, footer backgrounds

CSS Custom Properties

:root {
  /* Base surfaces */
  --paper-canvas: #faf3e8;
  --paper-kraft: #c9a96e;
  --paper-white: #f5f0eb;

  /* Primary palette */
  --paper-sky: #6bafe2;
  --paper-forest: #3d8b5f;
  --paper-goldenrod: #e8b84b;
  --paper-terracotta: #c85a3a;
  --paper-rose: #d4808a;

  /* Secondary palette */
  --paper-navy: #2a3d5c;
  --paper-sage: #8db48e;
  --paper-sunset: #e8844a;
  --paper-lavender: #b8a9d4;
  --paper-coral: #f0a898;
  --paper-pine: #2d5e45;

  /* Text */
  --paper-text-primary: #2a3d5c;
  --paper-text-secondary: #5a6475;
  --paper-text-light: #f5f0eb;
  --paper-text-dark: #3e4147;

  /* Shadows */
  --paper-shadow-sm: 0 2px 4px rgba(42, 61, 92, 0.10);
  --paper-shadow-md: 0 4px 8px rgba(42, 61, 92, 0.12), 0 2px 4px rgba(42, 61, 92, 0.08);
  --paper-shadow-lg: 0 8px 16px rgba(42, 61, 92, 0.14), 0 4px 8px rgba(42, 61, 92, 0.08);
  --paper-shadow-xl: 0 12px 24px rgba(42, 61, 92, 0.16), 0 6px 12px rgba(42, 61, 92, 0.10);
  --paper-shadow-float: 0 16px 32px rgba(42, 61, 92, 0.18), 0 8px 16px rgba(42, 61, 92, 0.10);

  /* Depth layer elevations */
  --paper-layer-1: 0 1px 3px rgba(42, 61, 92, 0.08);
  --paper-layer-2: 0 3px 6px rgba(42, 61, 92, 0.10), 0 1px 3px rgba(42, 61, 92, 0.06);
  --paper-layer-3: 0 6px 12px rgba(42, 61, 92, 0.12), 0 3px 6px rgba(42, 61, 92, 0.06);
  --paper-layer-4: 0 10px 20px rgba(42, 61, 92, 0.14), 0 4px 8px rgba(42, 61, 92, 0.08);
  --paper-layer-5: 0 14px 28px rgba(42, 61, 92, 0.16), 0 6px 12px rgba(42, 61, 92, 0.08);
}

Typography

Paper Cut typography balances the handmade warmth of the aesthetic with modern readability. Display headings can lean into craft-inspired character -- rounded, bold, and slightly playful -- while body text stays clean and legible. The contrast between a whimsical display face and a grounded body font reinforces the "crafted but polished" personality of the style.

Font Style Usage
Fredoka Rounded, bold, friendly sans-serif Hero headlines, display text
Baloo 2 Rounded, bubbly display sans Section headings, feature titles
Nunito Rounded sans-serif, soft terminals Body text, subheadings
Quicksand Rounded geometric sans-serif UI labels, navigation, buttons
Poppins Geometric sans-serif, versatile Body text alternative, captions
Comfortaa Rounded geometric, friendly Logo text, decorative headings
DM Sans Clean geometric sans-serif Small text, metadata, footnotes

Font Pairing Recommendations

Heading Font Body Font Mood
Fredoka (700) Nunito (400, 600) Playful, warm, approachable
Baloo 2 (600, 700) Poppins (400, 500) Bold, modern, energetic
Comfortaa (600) Quicksand (400, 500) Gentle, soft, minimal
Fredoka (600) DM Sans (400, 500) Crafty headline, professional body

CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* Hero / Display headings */
h1 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--paper-text-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Section headings */
h2 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--paper-text-primary);
  line-height: 1.25;
}

/* Subsection headings */
h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  color: var(--paper-terracotta);
  line-height: 1.3;
}

/* Body text */
body {
  font-family: 'Nunito', 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--paper-text-primary);
}

/* UI labels and buttons */
.paper-label {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Paper-cut display text with shadow offset */
.paper-cut-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--paper-white);
  text-shadow:
    2px 2px 0 var(--paper-terracotta),
    4px 4px 0 rgba(42, 61, 92, 0.15);
  line-height: 1.05;
}

Layout Principles

  • Layered z-axis composition -- design the page as a stack of paper sheets at varying elevations; foreground content sits on the topmost layer while decorative elements recede behind
  • Wavy section dividers -- replace horizontal rules or hard section breaks with organic, curved clip-path or SVG shapes that suggest one paper layer overlapping the next
  • Generous padding and margins -- paper layers need breathing room to cast visible shadows; cramped layouts collapse the dimensional illusion
  • Card-based content grouping -- individual content blocks live on their own "paper sheets," each with its own shadow and slight elevation
  • Illustration-driven hero sections -- large paper-cut landscape or abstract scenes constructed from overlapping colored shapes serve as immersive entry points
  • Asymmetric, organic placement -- elements can overlap, peek from behind other layers, or extend beyond their container to reinforce the physical paper metaphor
  • Consistent light direction -- all shadows must fall in the same direction (typically bottom-right) to maintain the illusion of a single overhead light source
  • Limited depth tiers -- restrict designs to three to five distinct elevation levels to keep the spatial hierarchy readable
  • Responsive layer simplification -- on smaller screens, reduce the number of visible paper layers and shadow intensity to maintain performance and clarity
  • Full-bleed color sections -- alternate background colors between sections to represent different "sheets" of colored paper spanning the full viewport width

CSS / Design Techniques

Paper Layer with Stacked Shadows

The foundational technique for Paper Cut design. Each element gets multi-layered box-shadow to simulate physical paper elevation.

/* Base paper layer system */
.paper-layer {
  position: relative;
  background: var(--paper-white);
  border-radius: 12px;
}

.paper-layer--1 {
  box-shadow: 0 1px 3px rgba(42, 61, 92, 0.08);
  z-index: 1;
}

.paper-layer--2 {
  box-shadow:
    0 3px 6px rgba(42, 61, 92, 0.10),
    0 1px 3px rgba(42, 61, 92, 0.06);
  z-index: 2;
}

.paper-layer--3 {
  box-shadow:
    0 6px 12px rgba(42, 61, 92, 0.12),
    0 3px 6px rgba(42, 61, 92, 0.06);
  z-index: 3;
}

.paper-layer--4 {
  box-shadow:
    0 10px 20px rgba(42, 61, 92, 0.14),
    0 4px 8px rgba(42, 61, 92, 0.08);
  z-index: 4;
}

.paper-layer--5 {
  box-shadow:
    0 14px 28px rgba(42, 61, 92, 0.16),
    0 6px 12px rgba(42, 61, 92, 0.08);
  z-index: 5;
}

/* Paper texture overlay */
.paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

Card Component

Cards are the primary content container in Paper Cut design, styled as individual paper sheets floating above the background.

.paper-card {
  background: var(--paper-white);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    0 4px 8px rgba(42, 61, 92, 0.10),
    0 2px 4px rgba(42, 61, 92, 0.06);
}

.paper-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 24px rgba(42, 61, 92, 0.14),
    0 4px 8px rgba(42, 61, 92, 0.08);
}

/* Colored card variants */
.paper-card--sky {
  background: var(--paper-sky);
  color: var(--paper-text-light);
}

.paper-card--forest {
  background: var(--paper-forest);
  color: var(--paper-text-light);
}

.paper-card--terracotta {
  background: var(--paper-terracotta);
  color: var(--paper-text-light);
}

.paper-card--goldenrod {
  background: var(--paper-goldenrod);
  color: var(--paper-text-primary);
}

/* Stacked paper card -- shows additional sheets behind */
.paper-card--stacked {
  position: relative;
}

.paper-card--stacked::before,
.paper-card--stacked::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 100%;
  border-radius: 16px;
  z-index: -1;
}

.paper-card--stacked::before {
  bottom: -6px;
  background: rgba(42, 61, 92, 0.04);
  box-shadow: 0 2px 4px rgba(42, 61, 92, 0.06);
  transform: rotate(0.5deg);
}

.paper-card--stacked::after {
  bottom: -12px;
  left: 8px;
  right: 8px;
  background: rgba(42, 61, 92, 0.03);
  box-shadow: 0 1px 3px rgba(42, 61, 92, 0.04);
  transform: rotate(-0.5deg);
}

Button Styles

Buttons in Paper Cut design look like small, clickable paper pieces that lift further on hover.

.paper-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.paper-btn--primary {
  background: var(--paper-terracotta);
  color: var(--paper-text-light);
  box-shadow:
    0 3px 6px rgba(200, 90, 58, 0.25),
    0 1px 3px rgba(200, 90, 58, 0.15);
}

.paper-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(200, 90, 58, 0.30),
    0 3px 6px rgba(200, 90, 58, 0.15);
}

.paper-btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 3px rgba(200, 90, 58, 0.20),
    0 1px 2px rgba(200, 90, 58, 0.10);
}

.paper-btn--secondary {
  background: var(--paper-goldenrod);
  color: var(--paper-text-primary);
  box-shadow:
    0 3px 6px rgba(232, 184, 75, 0.25),
    0 1px 3px rgba(232, 184, 75, 0.15);
}

.paper-btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(232, 184, 75, 0.30),
    0 3px 6px rgba(232, 184, 75, 0.15);
}

.paper-btn--outline {
  background: transparent;
  color: var(--paper-terracotta);
  border: 2px solid var(--paper-terracotta);
  box-shadow: none;
}

.paper-btn--outline:hover {
  background: var(--paper-terracotta);
  color: var(--paper-text-light);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(200, 90, 58, 0.20);
}

/* Paper-fold corner accent on button */
.paper-btn--folded::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(
    225deg,
    var(--paper-canvas) 50%,
    rgba(42, 61, 92, 0.08) 50%
  );
  border-radius: 0 10px 0 0;
}

A navigation bar styled as a paper strip floating above the page content.

.paper-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper-white);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    0 4px 8px rgba(42, 61, 92, 0.08),
    0 2px 4px rgba(42, 61, 92, 0.04);
}

.paper-nav__brand {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--paper-terracotta);
  text-decoration: none;
}

.paper-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paper-nav__link {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper-text-primary);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.paper-nav__link:hover {
  background: var(--paper-goldenrod);
  color: var(--paper-text-primary);
  box-shadow: 0 2px 4px rgba(232, 184, 75, 0.25);
}

.paper-nav__link--active {
  background: var(--paper-terracotta);
  color: var(--paper-text-light);
  box-shadow: 0 2px 4px rgba(200, 90, 58, 0.20);
}

/* Wavy bottom edge on nav */
.paper-nav--wavy {
  clip-path: polygon(
    0 0, 100% 0, 100% 75%,
    95% 85%, 90% 78%, 85% 88%, 80% 80%,
    75% 90%, 70% 82%, 65% 92%, 60% 84%,
    55% 90%, 50% 80%, 45% 88%, 40% 78%,
    35% 86%, 30% 80%, 25% 90%, 20% 82%,
    15% 88%, 10% 78%, 5% 85%, 0 75%
  );
  padding-bottom: 2rem;
}

Hero Section

A paper-cut landscape hero section with layered mountain/wave silhouettes.

.paper-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 8rem;
  background: var(--paper-sky);
  color: var(--paper-text-light);
  overflow: hidden;
}

.paper-hero__content {
  position: relative;
  z-index: 10;
  max-width: 700px;
}

.paper-hero__title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  text-shadow: 2px 3px 0 rgba(42, 61, 92, 0.15);
}

.paper-hero__subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* Layered mountain silhouettes */
.paper-hero__layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.paper-hero__layer--back {
  height: 35%;
  background: var(--paper-sage);
  clip-path: polygon(
    0 60%, 5% 50%, 10% 55%, 15% 40%, 20% 48%,
    25% 35%, 30% 42%, 35% 30%, 40% 38%, 45% 28%,
    50% 35%, 55% 25%, 60% 32%, 65% 22%, 70% 30%,
    75% 20%, 80% 28%, 85% 35%, 90% 25%, 95% 40%,
    100% 30%, 100% 100%, 0 100%
  );
  z-index: 2;
  filter: drop-shadow(0 -3px 4px rgba(42, 61, 92, 0.08));
}

.paper-hero__layer--mid {
  height: 28%;
  background: var(--paper-forest);
  clip-path: polygon(
    0 65%, 8% 50%, 15% 58%, 22% 42%, 28% 55%,
    35% 38%, 42% 48%, 48% 35%, 55% 45%, 62% 30%,
    68% 42%, 75% 32%, 82% 45%, 88% 35%, 95% 50%,
    100% 40%, 100% 100%, 0 100%
  );
  z-index: 3;
  filter: drop-shadow(0 -4px 6px rgba(42, 61, 92, 0.10));
}

.paper-hero__layer--front {
  height: 20%;
  background: var(--paper-pine);
  clip-path: polygon(
    0 70%, 10% 55%, 20% 65%, 30% 50%, 40% 60%,
    50% 45%, 60% 55%, 70% 42%, 80% 55%, 90% 48%,
    100% 58%, 100% 100%, 0 100%
  );
  z-index: 4;
  filter: drop-shadow(0 -5px 8px rgba(42, 61, 92, 0.12));
}

/* Sun/Moon circle element */
.paper-hero__sun {
  position: absolute;
  top: 15%;
  right: 18%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--paper-goldenrod);
  box-shadow:
    0 4px 12px rgba(232, 184, 75, 0.40),
    0 0 40px rgba(232, 184, 75, 0.15);
  z-index: 1;
}

/* Cloud cutout */
.paper-hero__cloud {
  position: absolute;
  width: 120px;
  height: 40px;
  background: var(--paper-white);
  border-radius: 40px;
  opacity: 0.8;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(42, 61, 92, 0.06);
}

.paper-hero__cloud::before,
.paper-hero__cloud::after {
  content: '';
  position: absolute;
  background: var(--paper-white);
  border-radius: 50%;
}

.paper-hero__cloud::before {
  width: 50px;
  height: 50px;
  top: -20px;
  left: 20px;
}

.paper-hero__cloud::after {
  width: 35px;
  height: 35px;
  top: -15px;
  left: 55px;
}

Wavy Section Divider

Organic, paper-like dividers between page sections.

/* Wavy divider -- one paper layer overlapping the next */
.paper-divider {
  position: relative;
  height: 80px;
  margin-top: -80px;
  z-index: 5;
}

.paper-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* CSS-only wavy divider alternative */
.paper-divider--css {
  position: relative;
  height: 60px;
  margin-top: -60px;
  z-index: 5;
  background: var(--paper-canvas);
  clip-path: polygon(
    0 40%, 2% 35%, 5% 42%, 8% 30%, 12% 38%,
    16% 25%, 20% 35%, 24% 20%, 28% 32%, 32% 22%,
    36% 30%, 40% 18%, 44% 28%, 48% 15%, 52% 25%,
    56% 18%, 60% 30%, 64% 20%, 68% 28%, 72% 15%,
    76% 25%, 80% 18%, 84% 30%, 88% 22%, 92% 32%,
    96% 25%, 100% 35%, 100% 100%, 0 100%
  );
}

/* Smooth wave using SVG inline */
.paper-wave {
  width: 100%;
  height: 80px;
  overflow: hidden;
  position: relative;
  margin-top: -1px;
}

.paper-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

Paper Fold / Dog-Ear Corner

A folded corner detail that appears on cards and containers.

/* Dog-ear fold corner effect */
.paper-fold {
  position: relative;
  overflow: hidden;
}

.paper-fold::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent var(--paper-canvas) transparent transparent;
  filter: drop-shadow(-2px 2px 3px rgba(42, 61, 92, 0.10));
}

/* Inner triangle shadow for realism */
.paper-fold::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    225deg,
    transparent 50%,
    rgba(42, 61, 92, 0.06) 50%
  );
  z-index: 1;
}

Torn Paper Edge

Simulating a torn or ripped paper edge using clip-path.

/* Torn paper top edge */
.paper-torn--top {
  clip-path: polygon(
    0% 4%, 2% 1%, 4% 3%, 7% 0%, 10% 2%, 13% 1%,
    16% 3%, 19% 0%, 22% 2%, 25% 1%, 28% 4%, 31% 1%,
    34% 3%, 37% 0%, 40% 2%, 43% 1%, 46% 3%, 49% 0%,
    52% 2%, 55% 1%, 58% 4%, 61% 1%, 64% 3%, 67% 0%,
    70% 2%, 73% 1%, 76% 3%, 79% 0%, 82% 2%, 85% 1%,
    88% 4%, 91% 1%, 94% 3%, 97% 0%, 100% 2%,
    100% 100%, 0% 100%
  );
  padding-top: 1.5rem;
}

/* Torn paper bottom edge */
.paper-torn--bottom {
  clip-path: polygon(
    0 0, 100% 0,
    100% 96%, 98% 99%, 96% 97%, 93% 100%, 90% 98%,
    87% 99%, 84% 97%, 81% 100%, 78% 98%, 75% 99%,
    72% 96%, 69% 99%, 66% 97%, 63% 100%, 60% 98%,
    57% 99%, 54% 97%, 51% 100%, 48% 98%, 45% 99%,
    42% 96%, 39% 99%, 36% 97%, 33% 100%, 30% 98%,
    27% 99%, 24% 97%, 21% 100%, 18% 98%, 15% 99%,
    12% 96%, 9% 99%, 6% 97%, 3% 100%, 0 98%
  );
  padding-bottom: 1.5rem;
}

Design Do's and Don'ts

Do's

  • Do maintain a consistent shadow direction across all elements to suggest a single, believable light source
  • Do use multi-layered box-shadows (tight near-shadow plus softer far-shadow) for realistic paper elevation
  • Do embrace organic, wavy, and curved edges to differentiate from typical boxy web layouts
  • Do restrict your depth to three to five distinct layers to keep the hierarchy readable and intuitive
  • Do apply subtle paper grain or noise textures to surfaces to reinforce the tactile, physical quality
  • Do use bold, flat colors inspired by construction paper and craft materials rather than gradients or photographic fills
  • Do test all text-on-color combinations for WCAG AA contrast, especially with colored paper backgrounds

Don'ts

  • Don't apply gradient fills within paper shapes -- real construction paper is a single, solid color per sheet
  • Don't use glossy or metallic effects -- the aesthetic is matte, fibrous, and handmade, not slick or digital
  • Don't stack more than five depth layers in a single composition, as it becomes visually overwhelming and spatially confusing
  • Don't mix shadow directions -- a shadow falling down-right on one element and down-left on another breaks the physical illusion
  • Don't neglect performance -- excessive box-shadow layers and filter: drop-shadow on animated elements can cause jank, especially on mobile
  • Don't use hard geometric patterns or pixel-sharp edges -- the aesthetic demands soft, organic, slightly irregular forms
  • Don't clutter the composition with too many overlapping layers -- leave enough negative space for shadows to be visible and the depth to be readable
  • Don't forget to simplify the layered effects on smaller viewports -- shadows and depth that look great on desktop can become muddy on mobile
Aesthetic Relationship to Paper Cut
Flat Design Shares the emphasis on bold, solid color shapes and simple geometry; Paper Cut adds the dimensional depth that Flat Design explicitly avoids
Material Design Google's system also uses layered elevation and shadow to create hierarchy; Paper Cut applies a warmer, more illustrative, craft-inspired take on the same principle
Claymorphism Both create tactile, three-dimensional effects; Claymorphism inflates surfaces like clay while Paper Cut stacks flat sheets with edge shadows
Craftcore Shares the handmade, artisanal sensibility; Craftcore is rooted in textile and fiber arts while Paper Cut draws from paper-cutting traditions specifically
Skeuomorphism Paper Cut borrows the idea of mimicking physical materials but stays stylized and illustrative rather than photorealistic
Glassmorphism Both create depth through layered surfaces; Glassmorphism uses transparency and blur while Paper Cut uses opaque, solid-color sheets
Light Skeuomorphism A subtler relative that also uses soft shadows and physical-object metaphors, but with less emphasis on the craft/illustration dimension
Kirigami / Origami UI A close cousin focused specifically on folding and 3D paper geometry rather than flat cut layers

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paper Cut Design</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --paper-canvas: #faf3e8;
      --paper-white: #f5f0eb;
      --paper-sky: #6bafe2;
      --paper-forest: #3d8b5f;
      --paper-goldenrod: #e8b84b;
      --paper-terracotta: #c85a3a;
      --paper-rose: #d4808a;
      --paper-navy: #2a3d5c;
      --paper-sage: #8db48e;
      --paper-pine: #2d5e45;
      --paper-text-primary: #2a3d5c;
      --paper-text-light: #f5f0eb;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--paper-canvas);
      color: var(--paper-text-primary);
      font-family: 'Nunito', sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
    }

    h1, h2, h3 { font-family: 'Fredoka', sans-serif; line-height: 1.2; }
    a { color: var(--paper-sky); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* -- Navigation -- */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--paper-white);
      padding: 1rem 2rem;
      display: flex; align-items: center; justify-content: space-between;
      box-shadow: 0 4px 8px rgba(42,61,92,.08), 0 2px 4px rgba(42,61,92,.04);
    }
    .nav__brand {
      font-family: 'Fredoka', sans-serif; font-weight: 700;
      font-size: 1.5rem; color: var(--paper-terracotta); text-decoration: none;
    }
    .nav__links { display: flex; gap: 1.5rem; list-style: none; }
    .nav__link {
      font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.9rem;
      color: var(--paper-text-primary); text-decoration: none;
      padding: 0.35rem 0.75rem; border-radius: 8px;
      transition: background .2s, color .2s, box-shadow .2s;
    }
    .nav__link:hover {
      background: var(--paper-goldenrod);
      box-shadow: 0 2px 4px rgba(232,184,75,.25); text-decoration: none;
    }

    /* -- Hero with paper-cut landscape -- */
    .hero {
      position: relative; min-height: 85vh;
      display: flex; align-items: center; justify-content: center; text-align: center;
      padding: 4rem 2rem 10rem;
      background: linear-gradient(180deg, #7fc4ed 0%, var(--paper-sky) 100%);
      overflow: hidden;
    }
    .hero__content { position: relative; z-index: 10; max-width: 650px; }
    .hero__title {
      font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 700;
      color: var(--paper-white); text-shadow: 2px 3px 0 rgba(42,61,92,.12);
      margin-bottom: 1rem;
    }
    .hero__subtitle {
      font-size: 1.15rem; color: rgba(245,240,235,.9);
      margin-bottom: 2rem; max-width: 500px; margin-inline: auto;
    }
    .hero__sun {
      position: absolute; top: 12%; right: 15%; width: 90px; height: 90px;
      border-radius: 50%; background: var(--paper-goldenrod);
      box-shadow: 0 4px 12px rgba(232,184,75,.4), 0 0 50px rgba(232,184,75,.15);
      z-index: 1;
    }
    .hero__cloud {
      position: absolute; background: var(--paper-white);
      border-radius: 40px; opacity: .7; z-index: 2;
      box-shadow: 0 2px 6px rgba(42,61,92,.05);
    }
    .hero__cloud::before, .hero__cloud::after {
      content: ''; position: absolute; background: var(--paper-white); border-radius: 50%;
    }
    .hero__cloud--1 { width: 120px; height: 36px; top: 20%; left: 10%; }
    .hero__cloud--1::before { width: 48px; height: 48px; top: -22px; left: 18px; }
    .hero__cloud--1::after  { width: 32px; height: 32px; top: -14px; left: 52px; }
    .hero__cloud--2 { width: 100px; height: 30px; top: 30%; right: 30%; }
    .hero__cloud--2::before { width: 40px; height: 40px; top: -18px; left: 14px; }
    .hero__cloud--2::after  { width: 28px; height: 28px; top: -12px; left: 44px; }

    /* Mountain layers */
    .hero__mountains { position: absolute; left: 0; right: 0; bottom: 0; }
    .mountain-layer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
    .mountain-layer--back {
      height: 40%; background: var(--paper-sage); z-index: 3;
      clip-path: polygon(0 55%,6% 42%,12% 50%,18% 35%,24% 45%,30% 30%,36% 40%,42% 28%,48% 38%,54% 25%,60% 35%,66% 22%,72% 33%,78% 20%,84% 30%,90% 38%,96% 28%,100% 38%,100% 100%,0 100%);
      filter: drop-shadow(0 -3px 5px rgba(42,61,92,.08));
    }
    .mountain-layer--mid {
      height: 32%; background: var(--paper-forest); z-index: 4;
      clip-path: polygon(0 60%,8% 45%,16% 55%,24% 38%,32% 50%,38% 35%,44% 48%,52% 32%,58% 42%,66% 28%,72% 40%,80% 30%,88% 42%,94% 35%,100% 45%,100% 100%,0 100%);
      filter: drop-shadow(0 -4px 6px rgba(42,61,92,.10));
    }
    .mountain-layer--front {
      height: 22%; background: var(--paper-pine); z-index: 5;
      clip-path: polygon(0 65%,10% 50%,20% 60%,30% 45%,40% 55%,50% 40%,60% 52%,70% 38%,80% 50%,90% 42%,100% 55%,100% 100%,0 100%);
      filter: drop-shadow(0 -5px 8px rgba(42,61,92,.12));
    }

    /* -- Shared section styles -- */
    .wave-divider { display: block; width: 100%; height: auto; margin-top: -2px; }
    .section { padding: 5rem 2rem; }
    .section__inner { max-width: 1100px; margin: 0 auto; }
    .section__heading {
      text-align: center; font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700; color: var(--paper-text-primary); margin-bottom: 3rem;
    }
    .grid { display: grid; gap: 2rem; }
    .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

    /* -- Card -- */
    .card {
      background: var(--paper-white); border-radius: 16px; padding: 2rem;
      position: relative;
      transition: transform .3s ease, box-shadow .3s ease;
      box-shadow: 0 4px 8px rgba(42,61,92,.10), 0 2px 4px rgba(42,61,92,.06);
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(42,61,92,.14), 0 4px 8px rgba(42,61,92,.08);
    }
    .card__icon {
      width: 56px; height: 56px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; margin-bottom: 1.25rem;
      box-shadow: 0 2px 4px rgba(42,61,92,.08);
    }
    .card__icon--sky       { background: var(--paper-sky); }
    .card__icon--forest    { background: var(--paper-forest); }
    .card__icon--goldenrod { background: var(--paper-goldenrod); }
    .card__title {
      font-family: 'Fredoka', sans-serif; font-weight: 600;
      font-size: 1.25rem; margin-bottom: .75rem;
    }
    .card__text { font-size: .95rem; color: #5a6475; line-height: 1.65; }

    /* Stacked-paper pseudo-layers behind card */
    .card--stacked::before, .card--stacked::after {
      content: ''; position: absolute; left: 5px; right: 5px;
      height: 100%; border-radius: 16px; z-index: -1;
    }
    .card--stacked::before {
      bottom: -7px; background: rgba(42,61,92,.04);
      box-shadow: 0 2px 4px rgba(42,61,92,.05); transform: rotate(.6deg);
    }
    .card--stacked::after {
      bottom: -13px; left: 10px; right: 10px;
      background: rgba(42,61,92,.025);
      box-shadow: 0 1px 3px rgba(42,61,92,.03); transform: rotate(-.6deg);
    }

    /* -- Colored showcase section -- */
    .showcase {
      background: var(--paper-forest); color: var(--paper-text-light);
      padding: 5rem 2rem;
    }
    .showcase__inner {
      max-width: 900px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    }
    .showcase__heading { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 1rem; }
    .showcase__text { opacity: .9; line-height: 1.75; margin-bottom: 1.5rem; }
    .showcase__sheet {
      padding: 1.25rem 1.5rem; border-radius: 12px;
      font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .9rem;
    }
    .showcase__sheet--1 { background: var(--paper-goldenrod); color: var(--paper-text-primary); z-index: 4; box-shadow: 0 4px 8px rgba(42,61,92,.15); transform: rotate(-1deg); }
    .showcase__sheet--2 { background: var(--paper-terracotta); color: var(--paper-text-light); z-index: 3; margin-top: -8px; margin-left: 12px; box-shadow: 0 3px 6px rgba(42,61,92,.12); transform: rotate(.8deg); }
    .showcase__sheet--3 { background: var(--paper-sky); color: var(--paper-text-light); z-index: 2; margin-top: -8px; margin-left: 6px; box-shadow: 0 2px 4px rgba(42,61,92,.10); transform: rotate(-.5deg); }
    .showcase__sheet--4 { background: var(--paper-rose); color: var(--paper-text-light); z-index: 1; margin-top: -8px; margin-left: 18px; box-shadow: 0 1px 3px rgba(42,61,92,.08); transform: rotate(1.2deg); }

    /* -- Buttons -- */
    .btn {
      display: inline-block; padding: .75rem 1.75rem;
      font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .95rem;
      border: none; border-radius: 10px; cursor: pointer; text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn--primary {
      background: var(--paper-terracotta); color: var(--paper-text-light);
      box-shadow: 0 3px 6px rgba(200,90,58,.25), 0 1px 3px rgba(200,90,58,.15);
    }
    .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(200,90,58,.30), 0 3px 6px rgba(200,90,58,.15); text-decoration: none; }
    .btn--secondary {
      background: var(--paper-goldenrod); color: var(--paper-text-primary);
      box-shadow: 0 3px 6px rgba(232,184,75,.25), 0 1px 3px rgba(232,184,75,.15);
    }
    .btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(232,184,75,.30), 0 3px 6px rgba(232,184,75,.15); text-decoration: none; }
    .btn--white {
      background: var(--paper-white); color: var(--paper-text-primary);
      box-shadow: 0 3px 6px rgba(42,61,92,.12), 0 1px 3px rgba(42,61,92,.06);
    }
    .btn--white:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(42,61,92,.16), 0 3px 6px rgba(42,61,92,.08); text-decoration: none; }

    /* -- Testimonial -- */
    .testimonial {
      background: var(--paper-white); border-radius: 16px; padding: 2rem;
      box-shadow: 0 4px 8px rgba(42,61,92,.10), 0 2px 4px rgba(42,61,92,.06);
      border-left: 5px solid var(--paper-goldenrod);
    }
    .testimonial__quote { font-style: italic; color: #5a6475; line-height: 1.7; margin-bottom: 1.25rem; }
    .testimonial__author { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .9rem; }
    .testimonial__role { font-size: .8rem; color: #8a93a5; }

    /* -- Footer -- */
    .footer {
      background: var(--paper-navy); color: rgba(245,240,235,.8);
      padding: 3rem 2rem; text-align: center;
    }
    .footer__inner { max-width: 800px; margin: 0 auto; }
    .footer__brand { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--paper-goldenrod); margin-bottom: .5rem; }
    .footer__text { font-size: .9rem; opacity: .7; }
    .footer__links { display: flex; justify-content: center; gap: 1.5rem; list-style: none; margin-top: 1.5rem; }
    .footer__link { color: rgba(245,240,235,.6); font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .85rem; text-decoration: none; transition: color .2s; }
    .footer__link:hover { color: var(--paper-goldenrod); text-decoration: none; }

    /* -- Responsive -- */
    @media (max-width: 768px) {
      .nav__links { gap: .75rem; }
      .nav__link { font-size: .8rem; padding: .3rem .5rem; }
      .hero { min-height: 70vh; padding-bottom: 8rem; }
      .showcase__inner { grid-template-columns: 1fr; text-align: center; }
      .grid--3 { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav class="nav">
    <a href="#" class="nav__brand">PaperCraft</a>
    <ul class="nav__links">
      <li><a href="#features" class="nav__link">Features</a></li>
      <li><a href="#showcase" class="nav__link">Showcase</a></li>
      <li><a href="#testimonials" class="nav__link">Voices</a></li>
      <li><a href="#" class="nav__link btn btn--primary" style="color:var(--paper-text-light)">Get Started</a></li>
    </ul>
  </nav>

  <!-- Hero with paper-cut landscape -->
  <section class="hero">
    <div class="hero__sun"></div>
    <div class="hero__cloud hero__cloud--1"></div>
    <div class="hero__cloud hero__cloud--2"></div>
    <div class="hero__content">
      <h1 class="hero__title">Crafted with Layers</h1>
      <p class="hero__subtitle">
        Beautiful depth through stacked paper cutouts,
        colored layers, and craft-inspired 3D shadows.
      </p>
      <a href="#features" class="btn btn--white">Explore</a>
    </div>
    <div class="hero__mountains">
      <div class="mountain-layer mountain-layer--back"></div>
      <div class="mountain-layer mountain-layer--mid"></div>
      <div class="mountain-layer mountain-layer--front"></div>
    </div>
  </section>

  <!-- Wave Divider -->
  <svg class="wave-divider" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,40 C120,65 240,10 360,35 C480,60 600,15 720,40 C840,65 960,20 1080,40 C1200,60 1320,25 1440,45 L1440,80 L0,80 Z" fill="#faf3e8"/>
  </svg>

  <!-- Features -->
  <section class="section" id="features">
    <div class="section__inner">
      <h2 class="section__heading">Why Paper Cut?</h2>
      <div class="grid grid--3">
        <div class="card card--stacked">
          <div class="card__icon card__icon--sky">&#9729;</div>
          <h3 class="card__title">Tactile Depth</h3>
          <p class="card__text">Stacked layers with realistic shadows create a physical, three-dimensional feel that flat design cannot achieve.</p>
        </div>
        <div class="card card--stacked">
          <div class="card__icon card__icon--forest">&#9752;</div>
          <h3 class="card__title">Craft Warmth</h3>
          <p class="card__text">Inspired by centuries of paper cutting traditions, every surface feels handmade, approachable, and authentically crafted.</p>
        </div>
        <div class="card card--stacked">
          <div class="card__icon card__icon--goldenrod">&#9733;</div>
          <h3 class="card__title">Bold Simplicity</h3>
          <p class="card__text">Solid color sheets and clean shapes keep the design readable while the layered depth adds visual richness.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Colored Showcase Section -->
  <section class="showcase" id="showcase">
    <div class="showcase__inner">
      <div>
        <h2 class="showcase__heading">Stacked Paper Layers</h2>
        <p class="showcase__text">Each layer is a discrete sheet of colored paper at its own elevation. Shadows fall consistently, building a clear hierarchy from back to front.</p>
        <a href="#" class="btn btn--secondary">Learn More</a>
      </div>
      <div>
        <div class="showcase__sheet showcase__sheet--1">Layer 1 -- Goldenrod</div>
        <div class="showcase__sheet showcase__sheet--2">Layer 2 -- Terracotta</div>
        <div class="showcase__sheet showcase__sheet--3">Layer 3 -- Sky Blue</div>
        <div class="showcase__sheet showcase__sheet--4">Layer 4 -- Dusty Rose</div>
      </div>
    </div>
  </section>

  <!-- Wave Divider -->
  <svg class="wave-divider" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,30 C180,55 360,5 540,30 C720,55 900,10 1080,35 C1200,50 1320,15 1440,40 L1440,80 L0,80 Z" fill="#faf3e8"/>
  </svg>

  <!-- Testimonials -->
  <section class="section" id="testimonials">
    <div class="section__inner">
      <h2 class="section__heading">What Designers Say</h2>
      <div class="grid grid--3">
        <div class="testimonial">
          <p class="testimonial__quote">"The layered paper approach gives our brand a warmth and dimensionality that no gradient or glass effect could match."</p>
          <p class="testimonial__author">Elara Chen</p>
          <p class="testimonial__role">Brand Director, Folio Studio</p>
        </div>
        <div class="testimonial">
          <p class="testimonial__quote">"Clients love the tactile quality. It feels like you could reach into the screen and peel back each layer."</p>
          <p class="testimonial__author">Marcus Webb</p>
          <p class="testimonial__role">UI Designer, CraftLab</p>
        </div>
        <div class="testimonial">
          <p class="testimonial__quote">"Paper Cut is the sweet spot between playful and professional. It brings craft into corporate without losing credibility."</p>
          <p class="testimonial__author">Sofia Reyes</p>
          <p class="testimonial__role">Creative Lead, Origami Digital</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer__inner">
      <p class="footer__brand">PaperCraft</p>
      <p class="footer__text">Layered paper cutout depth effects -- stacked shadows, colored layers, craft-inspired 3D.</p>
      <ul class="footer__links">
        <li><a href="#" class="footer__link">About</a></li>
        <li><a href="#" class="footer__link">Portfolio</a></li>
        <li><a href="#" class="footer__link">Contact</a></li>
        <li><a href="#" class="footer__link">Blog</a></li>
      </ul>
    </div>
  </footer>

</body>
</html>

Implementation Tips

  • Layer your shadows progressively -- start with 0 1px 3px for the closest layer and increase offset and blur for each subsequent elevation. Use a consistent scale (e.g., doubling the offset per level) so the spatial hierarchy reads naturally.
  • Use filter: drop-shadow() for non-rectangular shapes -- box-shadow only works on the bounding rectangle; drop-shadow() follows the actual shape outline created by clip-path, making it essential for wavy dividers and irregular silhouettes.
  • Keep clip-path points minimal for performance -- overly complex polygon values slow down rendering, particularly on mobile. Aim for 20-30 points maximum per divider; use SVG elements for more detailed shapes.
  • Provide a paper texture subtly -- use an inline SVG feTurbulence noise filter at 2-4% opacity as a ::before pseudo-element overlay. This adds tactile warmth without requiring an external image asset or noticeable rendering cost.
  • Simplify layers on mobile -- reduce the number of visible depth tiers from five to two or three on screens below 768px, and decrease shadow blur values proportionally. This prevents visual muddiness on smaller displays.
  • Animate with transform only -- when adding hover or scroll interactions, stick to translateY, scale, and rotate for paper-lifting effects. Avoid animating box-shadow directly; instead, layer the hover shadow on a ::after pseudo-element and animate its opacity for GPU-accelerated transitions.
  • Test shadow rendering across browsers -- multiple stacked box-shadow values can render slightly differently in Safari versus Chrome; validate the layered depth appearance on both WebKit and Blink engines.
  • Consider prefers-reduced-motion -- wrap all hover-lift and parallax animations in a @media (prefers-reduced-motion: no-preference) block so users who are sensitive to motion see a static version that retains the paper-cut visual style without the movement.
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.