Playground

Hello, Surface
html
<ax-surface class="my-surface" layers="elevation acrylic reveal">...</ax-surface>
css
.my-surface {
  width: 240px;
  height: 150px;
  --ax-radius: 16%;
  --ax-border-width: 1px;
  --ax-tilt-mode: absolute;
  --ax-tilt-depth: 3px;
  --ax-tilt-perspective: 600px;
  --ax-fill-color: rgba(255, 255, 255, 0.85);
  --elevation-depth: 32;
  --acrylic-tint-color: rgb(255, 255, 255);
  --acrylic-tint-opacity: 0.18;
  --acrylic-blur: 24px;
  --reveal-color: rgb(255, 255, 255);
  --reveal-opacity: 0.3;
}

Shapes