Skip to content

Shadows

Effects
Adds a shadow to the element.
Class Properties
wpex-shadow-xs
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
wpex-shadow-sm
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
wpex-shadow
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
wpex-shadow-md
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
wpex-shadow-lg
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
wpex-shadow-xl
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
wpex-shadow-2xl
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
wpex-shadow-inner
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
wpex-shadow-none
box-shadow: none;
wpex-shadow-xs
wpex-shadow-sm
wpex-shadow
wpex-shadow-md
wpex-shadow-lg
wpex-shadow-xl
wpex-shadow-2xl
wpex-shadow-inner

Hover Styles

Shadow classes can be applied on hover by using wpex-hover- instead of wpex-. For example if you want to add a shadow on hover you can use wpex-hover-shadow.

wpex-hover-shadow-xs
wpex-hover-shadow-sm
wpex-hover-shadow
wpex-hover-shadow-md
wpex-hover-shadow-lg
wpex-hover-shadow-xl
wpex-hover-shadow-2xl
wpex-hover-shadow-inner