Hire UsGet CoreUI PRO all-access →

Vue Shadows Utilities

Shadows

MarkdownChatGPTClaude

Add or remove shadows to elements with box-shadow utilities.

ClassStyles
.shadowbox-shadow: 0 .125rem .25rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .375rem .75rem -.125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .75rem 1.5rem -.25rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
.shadow-xsbox-shadow: 0 0.0625rem 0.125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
.shadow-smbox-shadow: 0 .0625rem .125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
.shadow-lgbox-shadow: 0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .375rem 1rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .75rem 2rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 1.5rem 3.5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(8% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
.shadow-xlbox-shadow: 0 .1875rem .5rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 .5rem 1.25rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 1rem 2.5rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent), 0 2rem 5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(9% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent);
.shadow-nonebox-shadow: none;
.shadow-primary--cui-shadow-tint: var(--cui-primary-bg);
.shadow-secondary--cui-shadow-tint: var(--cui-secondary-bg);
.shadow-success--cui-shadow-tint: var(--cui-success-bg);
.shadow-info--cui-shadow-tint: var(--cui-info-bg);
.shadow-warning--cui-shadow-tint: var(--cui-warning-bg);
.shadow-danger--cui-shadow-tint: var(--cui-danger-bg);
.shadow-inverse--cui-shadow-tint: var(--cui-inverse-bg);
.shadow-current--cui-shadow-tint: currentcolor;
.shadow-black--cui-shadow-tint: var(--cui-black);
.shadow-white--cui-shadow-tint: var(--cui-white);
.shadow-opacity-10--cui-shadow-opacity: 0.1;
.shadow-opacity-20--cui-shadow-opacity: 0.2;
.shadow-opacity-30--cui-shadow-opacity: 0.3;
.shadow-opacity-40--cui-shadow-opacity: 0.4;
.shadow-opacity-50--cui-shadow-opacity: 0.5;
.shadow-opacity-60--cui-shadow-opacity: 0.6;
.shadow-opacity-70--cui-shadow-opacity: 0.7;
.shadow-opacity-80--cui-shadow-opacity: 0.8;
.shadow-opacity-90--cui-shadow-opacity: 0.9;
.shadow-opacity-100--cui-shadow-opacity: 1;
.shadow-opacity-25--cui-shadow-opacity: 0.25;
.shadow-opacity-75--cui-shadow-opacity: 0.75;
.focus-ring-primary--cui-focus-ring-color: var(--cui-primary-focus-ring);
.focus-ring-secondary--cui-focus-ring-color: var(--cui-secondary-focus-ring);
.focus-ring-success--cui-focus-ring-color: var(--cui-success-focus-ring);
.focus-ring-info--cui-focus-ring-color: var(--cui-info-focus-ring);
.focus-ring-warning--cui-focus-ring-color: var(--cui-warning-focus-ring);
.focus-ring-danger--cui-focus-ring-color: var(--cui-danger-focus-ring);
.focus-ring-inverse--cui-focus-ring-color: var(--cui-inverse-focus-ring);
On this page

Examples

While shadows on components are disabled by default in CoreUI for Vue and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow
Extra small shadow
Small shadow
Regular shadow
Larger shadow
Extra large shadow
vue
<div class="shadow-none p-4 mb-6 bg-4 rounded">No shadow</div>
<div class="shadow-xs p-4 mb-6 bg-body rounded">Extra small shadow</div>
<div class="shadow-sm p-4 mb-6 bg-body rounded">Small shadow</div>
<div class="shadow p-4 mb-6 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-4 mb-6 bg-body rounded">Larger shadow</div>
<div class="shadow-xl p-4 mb-6 bg-body rounded">Extra large shadow</div>

Color

Added in v6.0.0

A shadow does not have to be grey. Add a .shadow-{color} class next to the size class to tint it — the size class supplies the geometry, the colour class supplies the hue.

Primary
Success
Danger
Current color
vue
<div class="d-flex flex-wrap gap-5">
  <div class="shadow shadow-primary p-4 bg-body rounded">Primary</div>
  <div class="shadow shadow-success p-4 bg-body rounded">Success</div>
  <div class="shadow shadow-danger p-4 bg-body rounded">Danger</div>
  <div class="shadow shadow-current p-4 bg-body rounded fg-info">Current color</div>
</div>

The tint does not reach nested shadows: an element inside a .shadow-primary box draws its own shadow in the default colour, so a tinted card does not silently recolour everything inside it.

Untinted, inside a tinted parent
vue
<div class="shadow shadow-primary p-6 bg-body rounded">
  <div class="shadow p-4 bg-body rounded">Untinted, inside a tinted parent</div>
</div>

Opacity

Added in v6.0.0

.shadow-opacity-{10…100}, in steps of ten, scales the shadow without touching its colour or geometry, which is the usual way to soften a shadow on a busy surface. .shadow-opacity-25 and -75 are deprecated v5 steps, removed in v7.

30%
50%
70%
100%
vue
<div class="d-flex flex-wrap gap-5">
  <div class="shadow shadow-opacity-30 p-4 bg-body rounded">30%</div>
  <div class="shadow shadow-opacity-50 p-4 bg-body rounded">50%</div>
  <div class="shadow shadow-opacity-70 p-4 bg-body rounded">70%</div>
  <div class="shadow shadow-opacity-100 p-4 bg-body rounded">100%</div>
</div>

Customizing

CSS variables

Added in v6.0.0

Every shadow computes its alpha as base × strength × opacity, so three separate things can be changed at runtime without rewriting the shadow:

VariableScopeWhat it does
--cui-shadow-colorinherits from :rootThe colour every shadow is mixed from.
--cui-shadow-strengthinherits from :rootMultiplies every shadow’s alpha. Dark mode raises it, because the same alpha reads as weaker against a dark surface.
--cui-shadow-tintset by .shadow-{color}, does not inheritOverrides the colour for one element.
--cui-shadow-opacityset by .shadow-opacity-*, does not inheritScales one element’s shadow.

Setting --cui-shadow-color on the page changes every shadow at once, including the ones components draw:

:root {
  --cui-shadow-color: #1b4b91;
}
scss
@each $key, $value in $shadows {
  // stylelint-disable-next-line scss/at-function-named-arguments
  $name: if(sass($key == null): --cui-box-shadow; else: --cui-box-shadow-#{$key});
  $root-token-defaults: map.set($root-token-defaults, $name, $value);
}

Sass variables

scss
$shadows: (
  null: #{(
    "0 .125rem .25rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .375rem .75rem -.125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .75rem 1.5rem -.25rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)"
  )},
  xs: 0 .0625rem .125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent),
  sm: #{(
    "0 .0625rem .125rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(4% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)"
  )},
  lg: #{(
    "0 .125rem .375rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .375rem 1rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .75rem 2rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 1.5rem 3.5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(8% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)"
  )},
  xl: #{(
    "0 .1875rem .5rem -.0625rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(5% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 .5rem 1.25rem -.1875rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(6% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 1rem 2.5rem -.375rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(7% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)",
    "0 2rem 5rem -.75rem color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(9% * var(--cui-shadow-strength) * var(--cui-shadow-opacity, 1)), transparent)"
  )},
  inset: inset 0 1px 2px light-dark(color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(8% * var(--cui-shadow-opacity, 1)), transparent), color-mix(in oklch, var(--cui-shadow-tint, var(--cui-shadow-color)) calc(26% * var(--cui-shadow-opacity, 1)), transparent)),
) !default;

Utilities API

Shadow utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss
"shadow": (
  property: box-shadow,
  class: shadow,
  // The literal expressions from $shadows, not var(--cui-box-shadow*).
  // A token resolves where it is declared — on :root — so going through one
  // would freeze the tint and the opacity there and leave .shadow-primary
  // and .shadow-opacity-* with nothing to change.
  // `inset` stays out: it is a component's inner shadow, not a utility.
  values: map.merge(map.remove($shadows, inset), (none: none))
),
scss
"shadow-color": (
  property: (--cui-shadow-tint: null),
  class: shadow,
  values: map.merge(
    theme-color-refs("bg"),
    (
      "current": currentcolor,
      "black": var(--cui-black),
      "white": var(--cui-white),
    )
  )
),
scss
"shadow-opacity": (
  property: (--cui-shadow-opacity: null),
  class: shadow-opacity,
  values: map.merge(
    $util-opacity,
    (
      25: .25, // deprecated
      75: .75, // deprecated
    )
  )
),