Add or remove shadows to elements with box-shadow utilities.
You can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes.
<div class="w-75p h-75p bg-gray-light-4 shadow-none"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-sm"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-lg"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-xl"></div>import React from 'react';
const Shadow = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl" />
</>
);
}
export default Shadow;import React from 'react';
const Shadow = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl" />
</>
);
}
export default Shadow;<template>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</template><template>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</template><div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</div>Change the directions of shadow on the go.
<div class="w-75p h-75p bg-gray-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow shadow-end"></div>import React from 'react';
const ShadowDirections = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadowDirections shadow-top" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-bottom" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-start" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-end" />
</>
);
}
export default ShadowDirections;import React from 'react';
const ShadowDirections = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadowDirections shadow-top" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-bottom" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-start" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-end" />
</>
);
}
export default ShadowDirections;<template>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</template><template>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</template><div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</div>Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
<div class="w-75p h-75p bg-gray-light-4 shadow-none shadow-hover-sm"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-sm shadow-hover"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-lg shadow-hover-xl"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-xl shadow-hover-sm"></div>import React from 'react';
const ShadowHover = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm" />
</>
);
}
export default ShadowHover;import React from 'react';
const ShadowHover = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm" />
</>
);
}
export default ShadowHover;<template>
<div class="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm"></div>
</template><template>
<div class="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm"></div>
</template><div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
</div>Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
<div class="w-75p h-75p bg-gray-light-4 shadow-primary"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-red"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-blue"></div>
<div class="w-75p h-75p bg-gray-light-4 shadow-danger"></div>import React from 'react';
const ShadowColors = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-primary" />
<div className="w-75p h-75p bg-grey-light-4 shadow-red" />
<div className="w-75p h-75p bg-grey-light-4 shadow-blue" />
<div className="w-75p h-75p bg-grey-light-4 shadow-danger" />
</>
);
}
export default ShadowColors;import React from 'react';
const ShadowColors = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-primary" />
<div className="w-75p h-75p bg-grey-light-4 shadow-red" />
<div className="w-75p h-75p bg-grey-light-4 shadow-blue" />
<div className="w-75p h-75p bg-grey-light-4 shadow-danger" />
</>
);
}
export default ShadowColors;<template>
<div class="w-75p h-75p bg-grey-light-4 shadow-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-red"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-blue"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-danger"></div>
</template><template>
<div class="w-75p h-75p bg-grey-light-4 shadow-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-red"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-blue"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-danger"></div>
</template><div>
<div class="w-75p h-75p bg-grey-light-4 shadow-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-red"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-blue"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-danger"></div>
</div>