TypeScript icon, indicating that this package has built-in type declarations

0.19.3 • Public • Published

elevation-overlay Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

An overlay is a semi-transparent covering on an element that indicates its state. Overlays provide a systematic approach to visualizing states by using opacity.

Material Design Guidelines: States - Overlay



npm install @dev.mohe/mwc-elevation-overlay

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage


  body {
    /* dark mode surface color */
    background-color: #212121;


<script type="module">
  import {style as elevationStyle} from '@dev.mohe/mwc-elevation-overlay/mwc-elevation-overlay-css';
  import {LitElement, css, html} from 'lit-element';

  class MyElement extends LitElement {
    static get styles() {
      return [
        // use overlay styles
        // this element's styles
          button {
            /* generic floating elevation */
            --mdc-elevation-overlay-opacity: 9%;
          button:focus {
            /* higher interaction elevation */
            --mdc-elevation-overlay-opacity: 15%;
          button:active {
            /* highest interaction elevation */
            --mdc-elevation-overlay-opacity: 24%;

          button {
            /* Dark mode surface color */
            background-color: #212121;
            /* bounds overlay to element */
            position: relative;
            /* dark mode text color */
            color: #eeeeee;

            /* misc button styling */
            border: none;
            border-radius: 26px;
            height: 52px;
            width: 52px;
            font-size: 2em;
            outline: none;
    render() {
      return html`
            Must have class mdc-elevation-overlay and must always come before a
            ripple node.
          <div class="mdc-elevation-overlay"></div>
          <!-- surface content -->

  customElements.define('my-element', MyElement);

Customize colors

Appending to the example from above:

button {
  /* Note: try to keep luminosity high on low-opacity colors on dark */
  --mdc-elevation-overlay-fill-color: lightgreen;
button:focus {
  --mdc-elevation-overlay-fill-color: yellow;
button:active {
  --mdc-elevation-overlay-fill-color: red;
.mdc-elevation-overlay {
  /* transition animation to sync up color with opacity change */
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);


CSS Custom Properties

Name Default Description
--mdc-elevation-overlay-opacity 0 Opacity of the overlay.
--mdc-elevation-overlay-fill-color #fff Fill color of the overlay.
--mdc-elevation-overlay-width 100% Width of the overlay (absolute positioning may need to be set as well e.g. .mdc-elevation-overlay {--mdc-elevation-overlay-width: 50%; left: 50%;}).
--mdc-elevation-overlay-height 100% Height of the overlay (absolute positioning may need to be set as well e.g. .mdc-elevation-overlay {--mdc-elevation-overlay-height: 50%; top: 50%;}).

Additional references

Package Sidebar


npm i @dev.mohe/mwc-elevation-overlay

Weekly Downloads






Unpacked Size

411 kB

Total Files


Last publish


  • dev.mohe