Retro Scrapbook · Visual Playground

Start here

Cut, paste, and tape

Scrapbook design mimics a physical journal: things are slightly rotated, layered, and held down with tape and stickers, all on textured paper. The charm is in the imperfection — nothing is perfectly aligned. Great for personal sites, events, crafts, and memory-keeping.

Taped photos

Polaroid frames, rotated a few degrees, held down by a strip of tape.

Washi tape

Striped, semi-transparent tape strips used as accents and dividers.

Torn paper

Notes with ragged clip-path edges, like a page torn from a notebook.

Handwriting

A casual script font (Caveat / Gochi Hand) for captions and headings.

Component 1

Taped polaroids

A white frame with a wide bottom border, rotated slightly, a handwritten caption, and a strip of "tape" pinning the top.

summer '24

road trip!

best day

HTML

<div class="scrap">
  <figure class="polaroid">
    <span class="tape"></span>
    <div class="pic"></div>
    <figcaption class="cap">summer '24</figcaption>
  </figure>
  <figure class="polaroid">
    <span class="tape"></span>
    <div class="pic"></div>
    <figcaption class="cap">road trip!</figcaption>
  </figure>
  <figure class="polaroid">
    <span class="tape"></span>
    <div class="pic"></div>
    <figcaption class="cap">best day</figcaption>
  </figure>
</div>

CSS

.polaroid { background: #fff; padding: 12px 12px 34px;   /* wide bottom = polaroid */
  box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: rotate(-5deg); position: relative; }
.polaroid figcaption { font-family: 'Caveat', cursive; text-align: center; }
.tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 80px; height: 26px; background: rgba(224,164,88,.55); }   /* translucent tape */

Component 2

Washi tape & torn-paper note

Striped tape strips as accents, and a note with a ragged torn edge made with clip-path.

don't forget…

Slightly rotated, soft shadow, and a torn top & bottom edge. Feels ripped from a notebook.

CSS

/* washi tape */
.washi { height: 30px; transform: rotate(-1deg);
  background: repeating-linear-gradient(45deg, #e07a5f 0 14px, #f2cc8f 14px 28px); }

/* torn-paper edge */
.note {
  background: #fdf6e3; padding: 22px; transform: rotate(1.5deg);
  clip-path: polygon(0 4%, 6% 0, 18% 5%, 32% 1%, 48% 5%, 64% 0, 80% 5%, 94% 1%, 100% 5%,
                     100% 96%, 92% 100%, 78% 96%, 60% 100%, 44% 96%, 28% 100%, 14% 96%, 4% 100%, 0 95%);
}

Component 3

Stickers

Round and rounded-square stickers with a thick white border and a tilt — the finishing touch on any scrapbook page.

yay! ★ cute hi :)

CSS

.sticker {
  width: 84px; height: 84px; border-radius: 50%;
  background: #e07a5f; color: #fff;
  border: 4px solid #fff;                       /* the white sticker edge */
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transform: rotate(-8deg);                      /* always a little crooked */
  font-family: 'Gochi Hand', cursive;
}

Make it real: swap the colored polaroid fills for actual photos (see Placeholder Images), and vary every rotation slightly — perfect alignment kills the handmade feel.

Full example

A whole page in this style

The scrapbook aesthetic assembled into a travel-journal page — handwritten nav, a script hero, and taped polaroids with real photos on textured craft paper.

my travel journal ✿trips about

Summer road trip '25

the best three weeks ever <3

made with tape & love ♡

HTML (structure)

<div class="page">
  <nav class="hand">my travel journal ✿</nav>
  <header class="hero"><h1>Summer road trip '25</h1></header>
  <div class="board">
    <figure class="polaroid">
      <span class="tape"></span>
      <img src="trip.jpg" alt="">
      <figcaption>the big trees</figcaption>
    </figure>
  </div>
</div>

CSS (the scrapbook recipe)

/* textured craft-paper background */
.page { background: #efe6d2;
  background-image: radial-gradient(rgba(150,120,70,.08) 1px, transparent 1px);
  background-size: 8px 8px; }

/* handwriting for headings + captions */
h1, .cap, .logo { font-family: 'Caveat', cursive; }

/* taped polaroids, each tilted differently */
.polaroid { background:#fff; padding: 10px 10px 26px; box-shadow: 0 8px 18px rgba(0,0,0,.2); position: relative; }
.polaroid:nth-child(1) { transform: rotate(-5deg); }
.polaroid:nth-child(2) { transform: rotate(3deg); }      /* vary every angle */
.tape { position:absolute; top:-10px; left:50%; transform: translateX(-50%) rotate(-3deg);
  background: rgba(224,164,88,.55); }                     /* translucent tape strip */

Swap in your own photos: change each polaroid <img src> and give every one a slightly different rotation — the imperfection is the charm. Free photos at Unsplash.

In practice

Do & don't

Do

Rotate items a few degrees, each differently
Layer tape, photos, notes, stickers
Use a script font for captions
Add a paper texture underneath
Keep real body text in a readable font

Don't

Align everything to a perfect grid
Set long paragraphs in handwriting fonts
Over-rotate so it's hard to read
Forget alt text on the "photos"
Use it for serious/corporate content

Keep going: related warm, nostalgic looks live on Retro Revival and Nature Distilled; texture tricks on CSS Textures.

Recap

The takeaway

Retro scrapbook = taped polaroids, washi tape, torn-paper notes (clip-path), stickers, and handwriting on textured paper — everything slightly rotated and layered. Lean into the imperfection; that's the whole charm.