JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="box"></div>
  <div class="soft-float"></div>
    <div class="layered-depth"></div>
      <div class="dreamy-glow"></div>
        <div class="sharp-edge"></div>
        
             <div class="colored-ambient"></div>
                  <div class="inset-depth"></div>
                    <div class="paper-cut"></div>
                     <div class="neon-glow"></div>
                       <div class="gradient-shadow"></div>
   <div class="frosted-glass"></div>
    <div class="double-side"></div>
    <div class="cosmic-glow"></div>
    <div class="stacked-cards"></div>
    <div class="prismatic-edge"></div>
    <div class="neon-pulse"></div>
    <div class="brutalist"></div>
    <div class="sunset-glow"></div>
    <div class="inner-spotlight"></div>
    <div class="depth-illusion"></div>
    
    <div class="box ambient-light">
  
    </div>

CSS

.box {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    border: 1px solid #eee; /* Optional border for better visibility */
    
    box-shadow: 
        0px 0px 0px 1px #0E3F7E08,
        0px 1px 1px -0.5px #2A334508,
        0px 3px 3px -1.5px #2A334608,
        0px 6px 6px -3px #2A334608,
        0px 12px 12px -6px #0E3F7E08,
        0px 24px 24px -12px #0E3F7E10;
}

/* 1. Soft Float - Creates a gentle floating effect */
.soft-float {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.05);
}

/* 2. Layered Depth - Multiple layers creating dimensional depth */
.layered-depth {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.12),
        0 2px 2px rgba(0, 0, 0, 0.12),
        0 4px 4px rgba(0, 0, 0, 0.12),
        0 8px 8px rgba(0, 0, 0, 0.12),
        0 16px 16px rgba(0, 0, 0, 0.12);
}

/* 3. Dreamy Glow - Soft, ethereal glow effect */
.dreamy-glow {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(0, 0, 0, 0.05),
        0 0 70px rgba(0, 0, 0, 0.07);
}

/* 4. Sharp Edge - Crisp, professional shadow */
.sharp-edge {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(0, 0, 0, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 5. Colored Ambient - Subtle...