ComboStrap Styling - Shadow attribute (Elevation)


shadow (known also as elevation) is a styling attribute that elevates a block.

It adds a shadow and gives the block more emphasis.

As color, it helps prioritizing the components on your page in order to guide the viewer's eyes.

It's mostly used on a call-to-action component such as a button.


To add a shadow, you can use the shadow attribute or its alias elevation.


where the value of the attribute sets the scale height of the elevation

Value OnHover Animation Name Name
sm shadow-sm Small
md shadow-md Medium
lg shadow-lg Large
xl shadow-xl Extra-Large
true, 1 shadow Default

The OnHover animation name is the name that can be used to apply a shadow when the mouse is over an element . See the example

Elevation since version 1.12, Shadow since version 1.14



With a button


<btn shadow="sm">
Small Shadow

<btn shadow="md">
Medium Shadow

<btn primary shadow>
Default Shadow

<btn shadow="lg">
Large Shadow

<btn shadow="xl">
Extra-Large Shadow


With a card

<card shadow="xl" width="200px">
===== Elevated card =====
Guide on how to elevate

Elevated card

Guide on how to elevate


With a image and a box

<box shadow="lg" width="fit-content" align="center">

On Hover

You can also apply a shadow on hover with the shadow animation name

Example with a large shadow.

<box onHover="shadow-lg" width="fit-content" align="center">



You can change the default level of shadow with the defaultShadowLevel configuration.

Powered by ComboStrap