Quasar Shadow Classes Generator

Preview every Quasar shadow class on a card, compare two levels, and build a custom shadow on Quasar's scale.

Preview
Weekly report
shadow-8
Level 8
Compare with
Class 
shadow-8
Usage 
<q-card class="shadow-8">
CSS Quasar applies 
.shadow-8 {
  box-shadow:
    0 5px 5px -3px var(--q-shadow-umbra),
    0 8px 10px 1px var(--q-shadow-penumbra),
    0 3px 14px 2px var(--q-shadow-ambient);
}

body.body--dark .shadow-8 {
  box-shadow:
    0 5px 5px -3px var(--q-dark-shadow-umbra),
    0 8px 10px 1px var(--q-dark-shadow-penumbra),
    0 3px 14px 2px var(--q-dark-shadow-ambient);
}
In your own Sass, the light value is also $shadow-8. Add shadow-transition next to it to animate a change of level.
Click a level to preview it. Quasar's q-card, q-menu and raised q-btn sit at level 2: use 1 to 2 for surfaces at rest, 4 to 8 for things that float or react, 12 to 24 rarely.

Custom shadow on Quasar's scale

Start from a level, edit its layers, and copy CSS that uses Quasar's shadow tints, so it follows --q-shadow-color and Dark mode like the built-in classes.
Write the Dark mode rule
.soft-card
Light mode
.soft-card
Dark mode
Closest Quasar level: shadow-8 (exact match, so you can use the class instead)
CSS 
.soft-card {
  box-shadow:
    0 5px 5px -3px var(--q-shadow-umbra),
    0 8px 10px 1px var(--q-shadow-penumbra),
    0 3px 14px 2px var(--q-shadow-ambient);
}

body.body--dark .soft-card {
  box-shadow:
    0 5px 5px -3px var(--q-dark-shadow-umbra),
    0 8px 10px 1px var(--q-dark-shadow-penumbra),
    0 3px 14px 2px var(--q-dark-shadow-ambient);
}
Paste it into src/css/app.scss (or any stylesheet loaded after Quasar's), then add class="soft-card" to the element. Needs Quasar 2.31 or later, where the shadow tints are CSS variables.

How to use the Quasar Shadow Classes Generator

  1. Pick a tab, shadow-N for shadows below the element, shadow-up-N for shadows cast upward, or Inset & none, and click a level to put it on the preview card.
  2. Switch the preview to Dark to see how the same class looks with Quasar's Dark mode shadow color, and turn on Compare to put a second class next to it.
  3. Copy the class, or the CSS Quasar applies for it if you need the exact value in your own styles.
  4. If no level fits, start the custom builder from the closest one, edit the offset, blur and spread of each layer, name the class and copy the CSS with its Dark mode rule.

Want shadows tinted to your brand across a whole app? The Theme Builder exports a theme whose shadow color follows the darkest neutral of your palette.

Frequently asked questions