Peeling Paint

3D & Depth · Static · pure CSS

Two stacked coats of color live inside the letterforms: the topcoat is punched with irregular, true-alpha cutouts (an inline SVG evenodd mask) that expose a different undercoat color underneath, and small clip-path flaps curl off each patch's rim with a light-to-dark gradient and cast shadow. A weathered two-coat wall look, scattered across an otherwise fully attached, readable word.

Open in the generator →All effects
Peeling PaintPeeling Paint

How it works

Peeling Paint is a static 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Peeling Paint exposes 5 dedicated controls — Topcoat Hue, Undercoat Hue, Chips, Curl Angle and Weathering — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Peeling Paint — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-grid;
  line-height: 1.05;
}
.text-effect .fx-undercoat,
.text-effect .fx-topcoat {
  grid-area: 1 / 1;
}
.text-effect .fx-undercoat {
  color: hsl(83 50% 50%);
  text-shadow: 0 0.03em 0 rgba(0,0,0,.32), 0 0.015em 0 rgba(255,255,255,.1);
}
.text-effect .fx-topcoat {
  color: hsl(256 46% 46%);
  text-shadow: 0 0.03em 0 rgba(0,0,0,.32), 0 0.015em 0 rgba(255,255,255,.12);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20100%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M0%2C0H400V100H0Z%20M50.99%2C40.27L40.72%2C50.82L23.51%2C52.73L4.76%2C47.55L10.6%2C34.83L22.07%2C23.67L45.19%2C26.05Z%20M204.85%2C60.55L186.97%2C70.57L169.97%2C74.29L151.01%2C68.03L154.17%2C54.06L170.64%2C48.75L190.81%2C47.38Z%20M252.24%2C39.74L248.82%2C53.71L225.46%2C57.89L210.31%2C46.51L207.6%2C32.12L225.39%2C21.41L244.7%2C29.15Z%20M376.12%2C57.05L371.6%2C71.66L348.01%2C73.62L327.73%2C65.26L327.85%2C48.88L349.2%2C43.89L366.96%2C46.25Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20100%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M0%2C0H400V100H0Z%20M50.99%2C40.27L40.72%2C50.82L23.51%2C52.73L4.76%2C47.55L10.6%2C34.83L22.07%2C23.67L45.19%2C26.05Z%20M204.85%2C60.55L186.97%2C70.57L169.97%2C74.29L151.01%2C68.03L154.17%2C54.06L170.64%2C48.75L190.81%2C47.38Z%20M252.24%2C39.74L248.82%2C53.71L225.46%2C57.89L210.31%2C46.51L207.6%2C32.12L225.39%2C21.41L244.7%2C29.15Z%20M376.12%2C57.05L371.6%2C71.66L348.01%2C73.62L327.73%2C65.26L327.85%2C48.88L349.2%2C43.89L366.96%2C46.25Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.text-effect .fx-chip {
  position: absolute;
  z-index: 2;
  width: 0.4em;
  height: 0.304em;
  box-shadow: inset -0.02em -0.03em 0.05em rgba(0,0,0,.42), inset 0.02em 0.02em 0.03em rgba(255,255,255,.4);
  filter: drop-shadow(0.03em 0.06em 0.05em rgba(0,0,0,.55));
  pointer-events: none;
}
.text-effect .fx-c0 {
  left: 10.37%;
  top: 57.24%;
  clip-path: polygon(100% 50%, 83.13% 91.54%, 40.97% 89.58%, 0.08% 74.04%, 15.71% 33.49%, 38.62% 0.13%, 82.86% 8.8%);
  transform: rotate(-22.05deg) translate(-42%, -42%);
  background: linear-gradient(152.3deg,
      hsl(260.4243527038634 22% 96%) 0%,
      hsl(260.4243527038634 30% 80%) 32%,
      hsl(260.4243527038634 45% 42%) 64%,
      hsl(260.4243527038634 45% 16%) 100%);
}
.text-effect .fx-c1 {
  left: 47.09%;
  top: 77.52%;
  clip-path: polygon(94.41% 50%, 78.14% 85.28%, 37.2% 100%, 8.39% 70.04%, 0.68% 26.25%, 41.98% 14.85%, 74.4% 19.41%);
  transform: rotate(25.05deg) translate(-42%, -42%);
  background: linear-gradient(150.1deg,
      hsl(261.22059944304056 22% 96%) 0%,
      hsl(261.22059944304056 30% 80%) 32%,
      hsl(261.22059944304056 45% 42%) 64%,
      hsl(261.22059944304056 45% 16%) 100%);
}
.text-effect .fx-c2 {
  left: 61.35%;
  top: 56.71%;
  clip-path: polygon(100% 50%, 75.5% 81.98%, 40% 93.81%, 15.89% 66.42%, 11.29% 31.36%, 39.41% 3.59%, 76.32% 16.99%);
  transform: rotate(-18.83deg) translate(-42%, -42%);
  background: linear-gradient(142deg,
      hsl(261.9908629764104 22% 96%) 0%,
      hsl(261.9908629764104 30% 80%) 32%,
      hsl(261.9908629764104 45% 42%) 64%,
      hsl(261.9908629764104 45% 16%) 100%);
}
.text-effect .fx-c3 {
  left: 91.85%;
  top: 74.02%;
  clip-path: polygon(93.01% 50%, 75.08% 81.45%, 41.5% 87.25%, 0.74% 73.72%, 0.44% 26.13%, 38.22% 0%, 75.59% 17.92%);
  transform: rotate(23.01deg) translate(-42%, -42%);
  background: linear-gradient(148.2deg,
      hsl(260.30925542533805 22% 96%) 0%,
      hsl(260.30925542533805 30% 80%) 32%,
      hsl(260.30925542533805 45% 42%) 64%,
      hsl(260.30925542533805 45% 16%) 100%);
}

Pure CSS — just add the .text-effect class to any element.

Category
3D & Depth
Type
Static
Browser support
Inline SVG alpha-cutout mask (evenodd) + clip-path curled flaps (all modern browsers, -webkit-mask-image fallback included)
Capabilities
pure

Related 3D & Depth effects