Box Shadows

Add depth and emphasis through versatile shadows

Home

/

Snippets

/

Components

/

Box Shadows

Box Shadow Size

Use .pt-shadow-sm, .pt-shadow-md, .pt-shadow-lg, .pt-shadow-xl, and .pt-shadow-xxl to set the size and strength of a box shadow.

pt-shadow-sm

pt-shadow-md

pt-shadow-lg

pt-shadow-xl

pt-shadow-xxl

1



                                  

Box Shadow Location

Use .pt-shadow-(location)--lg to position shadows on the top (t), bottom (b), left (l), right (r), or combinations such as tl, tr, bl, br, lr, and tb.

pt-shadow-l-lg

pt-shadow-t-lg

pt-shadow-r-lg

pt-shadow-b-lg

pt-shadow-tl-lg

pt-shadow-tr-lg

pt-shadow-bl-lg

pt-shadow-br-lg

pt-shadow-lr-lg

pt-shadow-tb-lg

1



                                

Inset Box Shadows Size

Use .pt-shadow-sm--inset, .pt-shadow-md--inset, .pt-shadow-lg--inset, .pt-shadow-xl--inset, and .pt-shadow-xxl--inset to set the size and strength of an inset shadow.

pt-shadow-sm--inset

pt-shadow-md--inset

pt-shadow-lg--inset

pt-shadow-xl--inset

pt-shadow-xxl--inset

1



                                

Inset Box Shadow Location

Use .pt-shadow-(location)--lg--inset to apply inset shadows on the top (t), bottom (b), left (l), right (r), or combinations such as tl, tr, bl, br, lr, and tb.

pt-shadow-l-lg--inset

pt-shadow-t-lg--inset

pt-shadow-r-lg--inset

pt-shadow-b-lg--inset

pt-shadow-tl-lg--inset

pt-shadow-tr-lg--inset

pt-shadow-bl-lg--inset

pt-shadow-br-lg--inset

pt-shadow-lr-lg--inset

pt-shadow-tb-lg--inset

1



                                

Card Box Shadow Size

Use .pt-shadow-sm--card, .pt-shadow-md--card, .pt-shadow-lg--card, .pt-shadow-xl--card, and .pt-shadow-xxl--card to set the size and strength of a card shadow.

pt-shadow-b-sm--card

pt-shadow-b-md--card

pt-shadow-b-lg--card

pt-shadow-b-xl--card

pt-shadow-b-xxl--card

1



                                

Card Box Shadow Location

Use .pt-shadow-(location)--lg--card to position card shadows on the top (t), bottom (b), left (l), right (r), or combinations such as tl, tr, bl, and br.

pt-shadow-t-lg--card

pt-shadow-b-lg--card

pt-shadow-l-lg--card

pt-shadow-r-lg--card

pt-shadow-tl-lg--card

pt-shadow-tr-lg--card

pt-shadow-bl-lg--card

pt-shadow-br-lg--card

1