New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Shadows

Add or remove shadows to elements with box-shadow utilities.

Shadow

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>

Shadow Direction

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>

Shadow Hover

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>

Shadow Colors Option

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>

Shadow
Shadow Direction
Shadow Hover
Shadow Colors Option