Shadows

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

Examples

No shadow
Small shadow
Regular shadow
Larger shadow
Extra larger shadow
<div class="shadow-none p-3  bg-[rgba(246,247,249,1)]  rounded !mb-6">No shadow</div>
                      <div class="p-3 !shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] bg-[#ffffff] opacity-100 rounded !mb-6">Small shadow</div>
                      <div class=" shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] p-3 bg-[#ffffff] opacity-100 rounded !mb-6">Regular shadow</div>
                      <div class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] p-3 bg-[#ffffff] opacity-100 rounded !mb-6">Larger shadow</div>
                      <div class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] p-3 bg-[#ffffff] opacity-100 rounded">Extra larger shadow</div>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image