CSS

Soft shadow, one radius

42 lines 1 view by Md Shamim Hossain · published 26 Oct 2026

The two properties that carry the soft UI look: one radius scale and a shadow tinted towards the background rather than towards black. Paste it into the CSS pane above the HTML example.

.css

:root {
  --radius: 16px;
  --ink: #111827;
  --hairline: rgb(17 24 39 / 0.08);
}

body {
  margin: 0;
  padding: 2rem;
  background: #f6f7f9;
  font: 15px/1.55 system-ui, sans-serif;
  color: var(--ink);
}

.card {
  max-width: 26rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  /* Tinted, not black: the shadow reads as thickness. */
  box-shadow: 0 12px 28px rgb(17 24 39 / 0.06);
}

.card-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.card-body {
  margin: 0 0 1rem;
  color: #4b5563;
}

.card-footer {
  display: flex;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
  color: #9ca3af;
}

Run this in a sandbox This is somebody else’s code. The frame it runs in has no access to this site, your session, or this page, and nothing happens until you press the button. It can still loop, so Stop replaces it.

Preview allow-scripts only

Console

Nothing logged yet. console.log, console.warn and uncaught errors from the frame arrive here. alert() is blocked and says so.