Shadows

Canvas uses Bootstrap 5 box shadow utilities and adds a shadow transition helper plus hover shadows.

Shadow classes

Class	Effect
`.shadow-none`	No shadow
`.shadow-sm`	Small shadow
`.shadow`	Default (regular) shadow
`.shadow-lg`	Large shadow

Shadow transition

.shadow-ts sets a transition on box-shadow so shadow changes animate smoothly. Use it alongside a hover shadow.

Hover shadows (Canvas)

Canvas adds hover twins that apply the shadow only on hover:

Class	On hover
`.h-shadow-none`	Remove shadow
`.h-shadow-sm`	Small shadow
`.h-shadow`	Default shadow
`.h-shadow-lg`	Large shadow

Usage

A card that lifts on hover:

<div class="p-4 rounded-3 bg-contrast-0 shadow-sm h-shadow-lg shadow-ts">
  Rests with a small shadow, deepens on hover with a smooth transition.
</div>

Static elevated panel:

<div class="shadow-lg rounded-4 p-5">Prominent, floating panel.</div>

Combine with a scale hover for a full lift effect:

<a href="#" class="d-block p-4 shadow-sm h-shadow-lg h-scale-sm shadow-ts rounded-3">
  Lifts and grows slightly on hover.
</a>

Classes

Class	Description
`Bootstrap Shadows`	Canvas extends the Bootstrap Shadows so that they can be applied on Hovers. Example: For `.shadow-lg` to be applied on Hover, use `.h-shadow-lg` instead
`.shadow-ts`	Applies Shadow Transitions on the Element Example: [ch_pre] [/ch_pre]

Was this page helpful?