Elevation

A shadow that tells how high an element floats above the page, and follows its shape.

Wrap the content that should float above the page in ax-elevation and set --elevation-depth. The shadow has two layers that grow with the depth: a large, soft one and a small, darker one under the element.

Elevation runs on Surface, so the shadow follows the shape of the element, not only rectangles. It is also a layer of ax-surface. The shadows need room around the element and a light background to show.

npm install @ax-design/elevation

import { register } from '@ax-design/elevation';
register();

<script src="https://unpkg.com/@ax-design/elevation/build/main.js"></script>
<script>AxElevation.register();</script>

The depth is a number: the higher it is, the larger and softer the shadow. 0 draws no shadow.

The property is inherited, so you can set it on a container and every ax-elevation inside takes it.

<ax-elevation class="card">
  Depth
</ax-elevation>

.card {
  --elevation-depth: 16;
}

The shadow follows the Surface shape properties. A rounded card gets a rounded shadow, and a bevel or scoop corner gets a shadow with the same corner.

The shadow is cut out under the shape, so a translucent card does not look darker. Add the clip attribute to cut the content to the shape too, background included.

<ax-elevation clip>
  <div class="card-body">Shape</div>
</ax-elevation>

ax-elevation {
  --elevation-depth: 16;
  --ax-radius: 25%;
  --ax-corner-shape: scoop;
  --ax-corner-shoulder-radius: 8px;
}

Because the depth is inherited, one value on a container sets all cards inside. A card can still set its own depth.

Here the first two cards take the depth of the container, the last one sets its own.

<div class="row">
  <ax-elevation class="card">A</ax-elevation>
  <ax-elevation class="card">B</ax-elevation>
  <ax-elevation class="card own">C</ax-elevation>
</div>

.row {
  --elevation-depth: 12;
}

.own {
  --elevation-depth: 48;
}

Elevation is also a layer of ax-surface. List it first, so the other layers paint on top of it.

This surface has a shadow, a fill and a reveal light on one shape, and sinks when you press it.

import { register } from '@ax-design/surface';
import { registerElevationLayer } from '@ax-design/elevation';
import { registerRevealLayer } from '@ax-design/reveal-highlight';

registerElevationLayer();
registerRevealLayer();
register();

<ax-surface class="card" layers="elevation fill reveal">...</ax-surface>

.card {
  --elevation-depth: 20;
  --ax-tilt-mode: absolute;
}

Reference