Elevation

Perceived distance above a surface.

html

<div class="el-wrap" role="img" aria-label="A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift" data-level="1">
  <div class="el-floor">
    <div class="el-card" style="width:100px;height:100px;background:#FAF7F2;border-radius:12px;">level 1</div>
  </div>
  <p class="el-caption">elevation level 1 of 3</p>
</div>
<style>
.el-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.el-floor { background: #24143011; border-radius: 12px; padding: 32px 20px; display: flex; justify-content: center; }
.el-card { display: flex; align-items: center; justify-content: center; font-weight: 700; }
[data-level="0"] .el-card { box-shadow: none; transform: translateY(0); }
[data-level="1"] .el-card { box-shadow: 0 2px 6px rgba(36,20,48,.18); transform: translateY(-1px); }
[data-level="2"] .el-card { box-shadow: 0 8px 18px rgba(36,20,48,.22); transform: translateY(-4px); }
[data-level="3"] .el-card { box-shadow: 0 18px 36px rgba(36,20,48,.28); transform: translateY(-8px); }
.el-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="el-tw font-sans text-[#241430] w-[300px]" role="img" aria-label="A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift" data-level="1">
  <div class="bg-[#24143011] rounded-xl py-8 px-5 flex justify-center">
    <div class="el-tw-card flex items-center justify-center font-bold" style="width:100px;height:100px;background:#FAF7F2;border-radius:12px;">level 1</div>
  </div>
  <p class="mt-3 text-xs text-[#241430]/80">elevation level 1 of 3</p>
</div>
<style>
.el-tw[data-level="0"] .el-tw-card { box-shadow: none; transform: translateY(0); }
.el-tw[data-level="1"] .el-tw-card { box-shadow: 0 2px 6px rgba(36,20,48,.18); transform: translateY(-1px); }
.el-tw[data-level="2"] .el-tw-card { box-shadow: 0 8px 18px rgba(36,20,48,.22); transform: translateY(-4px); }
.el-tw[data-level="3"] .el-tw-card { box-shadow: 0 18px 36px rgba(36,20,48,.28); transform: translateY(-8px); }
</style>

react

export function Elevation({
  level = "1",
  background = "#FAF7F2",
  radius = 12,
  size = 100,
}) {
  const shadows = {
    "0": { boxShadow: "none", transform: "translateY(0)" },
    "1": { boxShadow: "0 2px 6px rgba(36,20,48,.18)", transform: "translateY(-1px)" },
    "2": { boxShadow: "0 8px 18px rgba(36,20,48,.22)", transform: "translateY(-4px)" },
    "3": { boxShadow: "0 18px 36px rgba(36,20,48,.28)", transform: "translateY(-8px)" },
  }[level];
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift">
      <div style={{ background: "#24143011", borderRadius: 12, padding: "32px 20px", display: "flex", justifyContent: "center" }}>
        <div style={{ width: size, height: size, background, borderRadius: radius, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, ...shadows }}>
          level {level}
        </div>
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>elevation level {level} of 3</p>
    </div>
  );
}