The Art of Color Depth

Buttons that feel like real objects: glossy glass, brushed metal, holographic foil, a soft cushion. Ten skeuomorphic button materials — Glossy, Glow, Metal, Foil, Layered, Inset, Glass, Neon, Duotone, Satin — built by technique, not by color. The depth is never one drop shadow: it is layers stacked on the same element (a gradient body, inset shadows for the bevel and inner glow, a brighter layer that fades in on hover like a light turning on, and a soft specular bar along the top). One markup for every material; the colors are just variables you swap. Ships three silhouettes per material (label pill, square icon button, and a toggle switch whose track is the material with a textured sliding knob), cursor-reactive glints on Metal and Foil, and a liquid-glass SVG refraction filter for the Glass material. Pure CSS + a tiny pointer hook, zero dependencies.

Aby Arlan

Install

npx @21st-dev/cli add arlanoska/color-depth

Loading preview...

"use client"

import { DepthButton, DepthIconButton, DepthToggle } from "@/components/ui/color-depth"

const STYLE = `
.cdp { display:flex; min-height:100vh; width:100%; align-items:center; justify-content:center;
  background:#f4f4f5; color:#1b1b1b; padding:32px 24px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",system-ui,sans-serif; }
.cdp-hero { position:relative; width:min(680px,92vw); height:260px; border:1px solid rgba(0,0,0,0.09);
  border-radius:16px; background:#f4f5f8; display:flex; align-items:center; justify-content:center; gap:16px;
  background-size:cover; background-position:center; overflow:hidden; }
.cdp-label { position:absolute; left:14px; bottom:10px; font-size:12px; color:#6b6b6b; pointer-events:none; }
.cdp-credit { position:absolute; right:14px; bottom:10px; font-size:12px; color:#6b6b6b; pointer-events:none; }
`

const Arrow = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" />
    <path d="m13 6 6 6-6 6" />
  </svg>
)

export default function Layered() {
  return (
    <>
      <style>{STYLE}</style>
      <div className="cdp">
        <div className="cdp-hero">
          <DepthButton variant="layered">Get Started</DepthButton>
          <DepthIconButton variant="layered" aria-label="Get Started"><Arrow /></DepthIconButton>
          <DepthToggle variant="layered" defaultOn />
          <span className="cdp-label">Layered</span>
        </div>
      </div>
    </>
  )
}