Design Styles Medium

Claymorphism

Puffy, inflated 3D clay shapes with thick outlines, pastel colors, and a playful soft-plastic feel — like children's clay toys.

Open in Lab

html css javascript

Targets: JS HTML

Code

:root {
  --cl-bg: #f0e8ff;
  --cl-purple: #c084fc;
  --cl-purple-dark: #a855f7;
  --cl-cyan: #67e8f9;
  --cl-green: #86efac;
  --cl-pink: #fca5a5;
  --cl-yellow: #fde68a;
  --cl-text: #2d1a4a;
  --cl-text-muted: #7c5fa5;
  --cl-radius: 30px;
  --font: "Nunito", system-ui, sans-serif;
}

/* Clay shadow formula */
.clay {
  border-radius: var(--cl-radius);
  box-shadow:
    inset -4px -4px 8px rgba(0, 0, 0, 0.18),
    inset 4px 4px 8px rgba(255, 255, 255, 0.55),
    0 20px 40px rgba(0, 0, 0, 0.14);
  outline: 4px solid rgba(0, 0, 0, 0.07);
}

/* Color variants */
.clay--purple {
  background: var(--cl-purple);
}
.clay--purple-dark {
  background: var(--cl-purple-dark);
}
.clay--cyan {
  background: var(--cl-cyan);
}
.clay--green {
  background: var(--cl-green);
}
.clay--pink {
  background: var(--cl-pink);
}
.clay--yellow {
  background: var(--cl-yellow);
}
.clay--yellow-badge {
  background: var(--cl-yellow);
}
.clay--cyan-badge {
  background: var(--cl-cyan);
}
.clay--pink-badge {
  background: var(--cl-pink);
}
.clay--green-badge {
  background: var(--cl-green);
}

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

body {
  font-family: var(--font);
  background: var(--cl-bg);
  color: var(--cl-text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Background decorative clay spheres ── */
.clay-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.clay-sphere {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -6px -6px 12px rgba(0, 0, 0, 0.18), inset 6px 6px 12px rgba(255, 255, 255, 0.6),
    0 12px 30px rgba(0, 0, 0, 0.12);
  outline: 4px solid rgba(0, 0, 0, 0.06);
  animation: sphereFloat 8s ease-in-out infinite;
}

.clay-sphere--1 {
  width: 140px;
  height: 140px;
  background: #c084fc;
  top: 5%;
  left: 3%;
  animation-delay: 0s;
  opacity: 0.7;
}

.clay-sphere--2 {
  width: 90px;
  height: 90px;
  background: #67e8f9;
  top: 15%;
  right: 6%;
  animation-delay: 1.5s;
  opacity: 0.65;
}

.clay-sphere--3 {
  width: 110px;
  height: 110px;
  background: #fde68a;
  bottom: 15%;
  left: 8%;
  animation-delay: 3s;
  opacity: 0.6;
}

.clay-sphere--4 {
  width: 70px;
  height: 70px;
  background: #86efac;
  bottom: 20%;
  right: 10%;
  animation-delay: 2s;
  opacity: 0.7;
}

.clay-sphere--5 {
  width: 55px;
  height: 55px;
  background: #fca5a5;
  top: 45%;
  left: 45%;
  animation-delay: 4s;
  opacity: 0.5;
}

@keyframes sphereFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(1.04);
  }
}

/* ── Page ── */
.page {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Header ── */
.header {
  text-align: center;
}

.header__chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 18px;
  margin-bottom: 24px;
  color: #2d1a4a;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.header__title {
  font-size: clamp(52px, 10vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cl-text);
}

.header__title span {
  color: var(--cl-purple-dark);
}

.header__tagline {
  margin-top: 16px;
  font-size: 17px;
  color: var(--cl-text-muted);
  font-weight: 600;
}

/* ── Profile card ── */
.card-section {
  display: flex;
  justify-content: center;
}

.clay-card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.clay-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.18), inset 4px 4px 8px rgba(255, 255, 255, 0.55),
    0 30px 60px rgba(0, 0, 0, 0.2);
}

.card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__name {
  font-size: 19px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.card__role {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
  margin-top: 2px;
}

.card__stats {
  display: flex;
  gap: 12px;
}

.stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: 20px;
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.15), inset 3px 3px 6px rgba(255, 255, 255, 0.5), 0
    6px 16px rgba(0, 0, 0, 0.1);
  outline: 3px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat:hover {
  transform: translateY(-3px) scale(1.04);
}

.stat__value {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: var(--cl-text);
  letter-spacing: -0.02em;
}

.stat__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--cl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
}

/* ── Controls ── */
.controls-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Buttons ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  padding: 14px 26px;
  border: none;
  cursor: pointer;
  color: var(--cl-text);
  border-radius: 20px;
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.16), inset 4px 4px 8px rgba(255, 255, 255, 0.55),
    0 14px 28px rgba(0, 0, 0, 0.12);
  outline: 4px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.16), inset 4px 4px 8px rgba(255, 255, 255, 0.55),
    0 20px 40px rgba(0, 0, 0, 0.18);
}

.btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.16), inset 2px 2px 4px rgba(255, 255, 255, 0.5), 0
    6px 12px rgba(0, 0, 0, 0.1);
}

/* ── Input ── */
.input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}

.input-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.clay-input {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 20px;
  color: var(--cl-text);
  outline: none;
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.08), inset 4px 4px 8px rgba(255, 255, 255, 0.8), 0
    8px 20px rgba(0, 0, 0, 0.08);
  outline: 4px solid rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease, outline-color 0.25s ease;
}

.clay-input:focus {
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.1), inset 4px 4px 8px rgba(255, 255, 255, 0.8), 0
    10px 28px rgba(192, 132, 252, 0.25);
  outline-color: rgba(192, 132, 252, 0.3);
}

.clay-input::placeholder {
  color: #c4aed8;
  font-style: italic;
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 100px;
  color: var(--cl-text);
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.14), inset 3px 3px 6px rgba(255, 255, 255, 0.5), 0
    6px 16px rgba(0, 0, 0, 0.1);
  outline: 3px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge:hover {
  transform: translateY(-3px) scale(1.06);
}

/* Claymorphism — Interactive JS */

(function () {
  "use strict";

  // ── Squish animation on button click ──
  document.querySelectorAll(".btn").forEach((btn) => {
    btn.addEventListener("click", function () {
      this.style.transition = "transform 0.07s ease, box-shadow 0.07s ease";
      this.style.transform = "scale(0.9) translateY(2px)";

      setTimeout(() => {
        this.style.transition =
          "transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease";
        this.style.transform = "scale(1.08) translateY(-4px)";

        setTimeout(() => {
          this.style.transition = "transform 0.35s cubic-bezier(0.34,1.56,0.64,1)";
          this.style.transform = "";
          setTimeout(() => {
            this.style.transition = "";
          }, 350);
        }, 150);
      }, 70);
    });
  });

  // ── Card tilt / 3D perspective on hover ──
  const profileCard = document.querySelector(".clay-card");
  if (profileCard) {
    profileCard.addEventListener("mousemove", (e) => {
      const rect = profileCard.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / (rect.width / 2);
      const dy = (e.clientY - cy) / (rect.height / 2);

      profileCard.style.transform = `
        translateY(-6px) scale(1.02)
        rotateX(${-dy * 6}deg)
        rotateY(${dx * 6}deg)
      `;
    });

    profileCard.addEventListener("mouseleave", () => {
      profileCard.style.transform = "";
      profileCard.style.transition =
        "transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease";
      setTimeout(() => {
        profileCard.style.transition = "";
      }, 400);
    });
  }

  // ── Entrance animation for page elements ──
  const page = document.querySelector(".page");
  const children = page ? Array.from(page.children) : [];

  children.forEach((child, i) => {
    child.style.opacity = "0";
    child.style.transform = "translateY(30px) scale(0.96)";
    child.style.transition = `
      opacity 0.5s ease ${i * 0.12}s,
      transform 0.6s cubic-bezier(0.34,1.56,0.64,1) ${i * 0.12}s
    `;
  });

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      children.forEach((child) => {
        child.style.opacity = "1";
        child.style.transform = "";
      });
    });
  });

  // ── Sphere parallax ──
  const spheres = document.querySelectorAll(".clay-sphere");
  document.addEventListener("mousemove", (e) => {
    const px = e.clientX / window.innerWidth - 0.5;
    const py = e.clientY / window.innerHeight - 0.5;

    spheres.forEach((sphere, i) => {
      const depth = (i + 1) * 8;
      sphere.style.translate = `${px * depth}px ${py * depth}px`;
    });
  });

  // ── Input: clay wobble on focus ──
  const clayInput = document.getElementById("clayInput");
  if (clayInput) {
    clayInput.addEventListener("focus", () => {
      clayInput.style.transition = "transform 0.3s cubic-bezier(0.34,1.56,0.64,1)";
      clayInput.style.transform = "scale(1.02)";
    });
    clayInput.addEventListener("blur", () => {
      clayInput.style.transform = "";
    });
  }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>Claymorphism — Design Style</title>
  </head>
  <body>
    <!-- Decorative clay spheres background -->
    <div class="clay-deco" aria-hidden="true">
      <div class="clay-sphere clay-sphere--1"></div>
      <div class="clay-sphere clay-sphere--2"></div>
      <div class="clay-sphere clay-sphere--3"></div>
      <div class="clay-sphere clay-sphere--4"></div>
      <div class="clay-sphere clay-sphere--5"></div>
    </div>

    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="header__chip clay clay--yellow">Claymorphism</div>
        <h1 class="header__title">Clay<span>morph</span></h1>
        <p class="header__tagline">Puffy, inflated shapes with soft-plastic charm.</p>
      </header>

      <!-- Profile card -->
      <section class="card-section">
        <div class="clay-card clay clay--purple profile-clay-card">
          <div class="card__top">
            <!-- Clay avatar ball -->
            <div class="avatar clay clay--purple-dark">
              <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="26" cy="26" r="26" fill="rgba(255,255,255,0.15)"/>
                <circle cx="26" cy="19" r="10" fill="rgba(255,255,255,0.5)"/>
                <path d="M6 50c0-11.046 8.954-20 20-20s20 8.954 20 20" fill="rgba(255,255,255,0.35)"/>
                <!-- Shine dot -->
                <circle cx="19" cy="13" r="4" fill="rgba(255,255,255,0.45)"/>
              </svg>
            </div>
            <div class="card__info">
              <h2 class="card__name">Clay Parker</h2>
              <p class="card__role">3D Designer</p>
            </div>
          </div>

          <div class="card__stats">
            <div class="stat clay clay--cyan">
              <span class="stat__value">204</span>
              <span class="stat__label">Sculpts</span>
            </div>
            <div class="stat clay clay--green">
              <span class="stat__value">4.7</span>
              <span class="stat__label">Rating</span>
            </div>
            <div class="stat clay clay--yellow">
              <span class="stat__value">11k</span>
              <span class="stat__label">Fans</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Controls -->
      <section class="controls-section">
        <div class="button-row">
          <button class="btn clay clay--cyan" id="clayBtn1">Squish Me!</button>
          <button class="btn clay clay--green">Explore</button>
          <button class="btn clay clay--pink">Maybe</button>
        </div>

        <div class="input-wrap">
          <label class="input-label" for="clayInput">Your clay name</label>
          <input class="clay-input clay" id="clayInput" type="text" placeholder="Moldy McBlobface..." />
        </div>

        <div class="badge-row">
          <span class="badge clay clay--yellow-badge">Clay</span>
          <span class="badge clay clay--cyan-badge">Puffy</span>
          <span class="badge clay clay--pink-badge">3D</span>
          <span class="badge clay clay--green-badge">Playful</span>
        </div>
      </section>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Claymorphism

Claymorphism is the three-dimensional sibling of flat design — elements look like they were molded from soft, brightly colored clay and then photographed. The signature formula combines four distinct shadow layers: an inner bottom-right shadow that darkens the form, an inner top-left highlight that lightens it, a strong outer drop shadow for lift, and a thick semi-transparent outline that simulates the clay’s physical edge. Together they create an unmistakable inflated, squishy quality.

Every element uses solid pastel colors rather than gradients: #C084FC purple, #67E8F9 cyan, #86EFAC green, #FCA5A5 pink, #FDE68A yellow. This solid-color-plus-shadow approach is what distinguishes claymorphism from regular 3D design — the material is the color, and the shape is everything. 'Nunito' or 'Quicksand' fonts with their rounded letterforms echo the rounded border-radius: 30px shapes throughout.

Background decorations are scattered clay spheres — simple CSS circles with the full clay shadow formula — that reinforce the tactile, three-dimensional world. The light lavender background (#F0E8FF) is warm enough to feel cozy without competing with the colorful clay elements.

Key characteristics

Light lavender #F0E8FF background with scattered decorative clay spheres
Four-layer clay shadow formula: inner dark, inner highlight, outer drop, thick outline
border-radius: 30px on all primary UI elements
Solid pastel colors per element (purple, cyan, green, pink, yellow)
Squish animation on button hover/click using scale transform
'Nunito' rounded typography

When to use it

Claymorphism is perfect for mobile app onboarding screens, children’s apps and games, creative SaaS products, and any context where joy, playfulness, and a sense of tactile delight are desired. The heavy visual weight means it works best on component-level showcases and landing heroes, not dense data views.