Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V
Celebrate Tech
10
10
Welcome Amit
  Logout
  Change Password
  Change Email

Box Shadows Outset

Elevate Your Design with Depth and Dimension

Add depth and dimension to your elements with our collection of box shadow effects. From subtle outlines to bold and striking shadows, these effects bring a sense of layering and space, making your UI stand out with a professional touch.

Key Features:

  • Wide Variety: Includes subtle to dramatic outset box shadows for all elements.
  • Easy Implementation: Apply predefined classes to instantly add shadows—no complex coding required.
  • Fully Customizable: Adjust size, blur, spread, and color to match your design needs.
  • Performance Optimized: Built with minimal CSS to ensure fast rendering and smooth visual effects.
  • Cross-Browser Support: Works seamlessly across all modern browsers for consistent performance.
All Sides Shadow
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwCrTe'>Theme</button>
<button class='Bn BdNe CrRd Br2 CrBrRd HrCrBdRd BxSwCrRd'>Red</button>
<button class='Bn BdNe CrYw Br2 CrBrYw HrCrBdYw BxSwCrYw'>Yellow</button>
<button class='Bn BdNe CrOe Br2 CrBrOe HrCrBdOe BxSwCrOe'>Orange</button>
<button class='Bn BdNe CrBe Br2 CrBrBe HrCrBdBe BxSwCrBe'>Blue</button>
<button class='Bn BdNe CrGn Br2 CrBrGn HrCrBdGn BxSwCrGn'>Green</button>
<button class='Bn BdNe CrPk Br2 CrBrPk HrCrBdPk BxSwCrPk'>Pink</button>
<button class='Bn BdNe CrPe Br2 CrBrPe HrCrBdPe BxSwCrPe'>Purple</button>
<button class='Bn BdNe CrGy Br2 CrBrGy HrCrBdGy BxSwCrGy'>Gray</button>
<button class='Bn BdNe CrBk Br2 CrBrBk HrCrBdBk BxSwCrBk'>Black</button>
Glow Shadow
Copy Code :
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwGwCrTe'>Theme</button>
<button class='Bn BdNe CrRd Br2 CrBrRd HrCrBdRd BxSwGwCrRd'>Red</button>
<button class='Bn BdNe CrYw Br2 CrBrYw HrCrBdYw BxSwGwCrYw'>Yellow</button>
<button class='Bn BdNe CrOe Br2 CrBrOe HrCrBdOe BxSwGwCrOe'>Orange</button>
<button class='Bn BdNe CrBe Br2 CrBrBe HrCrBdBe BxSwGwCrBe'>Blue</button>
<button class='Bn BdNe CrGn Br2 CrBrGn HrCrBdGn BxSwGwCrGn'>Green</button>
<button class='Bn BdNe CrPk Br2 CrBrPk HrCrBdPk BxSwGwCrPk'>Pink</button>
<button class='Bn BdNe CrPe Br2 CrBrPe HrCrBdPe BxSwGwCrPe'>Purple</button>
<button class='Bn BdNe CrGy Br2 CrBrGy HrCrBdGy BxSwGwCrGy'>Gray</button>
<button class='Bn BdNe CrBk Br2 CrBrBk HrCrBdBk BxSwGwCrBk'>Black</button>
One Side Shadow
Source Code 

<button class='Bn BdNe CrTe Br2  CrBrTe HrCrBdTe BxSwTpCrTe'>Top</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwRtCrTe'>Right</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwBmCrTe'>Bottom</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwLtCrTe'>Left</button>
Multi Side Shadow
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwTpLtCrTe'>Top Left</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwBmLtCrTe'>Bottom Left</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwBmRtCrTe'>Bottom Right</button>
<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwTpRtCrTe'>Top Right</button>
Floating Shadow
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwFgCrTe'>Theme</button>
<button class='Bn BdNe CrRd Br2 CrBrRd HrCrBdRd BxSwFgCrRd'>Red</button>
<button class='Bn BdNe CrYw Br2 CrBrYw HrCrBdYw BxSwFgCrYw'>Yellow</button>
<button class='Bn BdNe CrOe Br2 CrBrOe HrCrBdOe BxSwFgCrOe'>Orange</button>
<button class='Bn BdNe CrBe Br2 CrBrBe HrCrBdBe BxSwFgCrBe'>Blue</button>
<button class='Bn BdNe CrGn Br2 CrBrGn HrCrBdGn BxSwFgCrGn'>Green</button>
<button class='Bn BdNe CrPk Br2 CrBrPk HrCrBdPk BxSwFgCrPk'>Pink</button>
<button class='Bn BdNe CrPe Br2 CrBrPe HrCrBdPe BxSwFgCrPe'>Purple</button>
<button class='Bn BdNe CrGy Br2 CrBrGy HrCrBdGy BxSwFgCrGy'>Gray</button>
<button class='Bn BdNe CrBk Br2 CrBrBk HrCrBdBk BxSwFgCrBk'>Black</button>
Multiple Layered Shadow
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSwLdCrTe'>Theme</button>
<button class='Bn BdNe CrRd Br2 CrBrRd HrCrBdRd BxSwLdCrRd'>Red</button>
<button class='Bn BdNe CrYw Br2 CrBrYw HrCrBdYw BxSwLdCrYw'>Yellow</button>
<button class='Bn BdNe CrOe Br2 CrBrOe HrCrBdOe BxSwLdCrOe'>Orange</button>
<button class='Bn BdNe CrBe Br2 CrBrBe HrCrBdBe BxSwLdCrBe'>Blue</button>
<button class='Bn BdNe CrGn Br2 CrBrGn HrCrBdGn BxSwLdCrGn'>Green</button>
<button class='Bn BdNe CrPk Br2 CrBrPk HrCrBdPk BxSwLdCrPk'>Pink</button>
<button class='Bn BdNe CrPe Br2 CrBrPe HrCrBdPe BxSwLdCrPe'>Purple</button>
<button class='Bn BdNe CrGy Br2 CrBrGy HrCrBdGy BxSwLdCrGy'>Gray</button>
<button class='Bn BdNe CrBk Br2 CrBrBk HrCrBdBk BxSwLdCrBk'>Black</button>
3D Shadow
Source Code 

<button class='Bn BdNe CrTe Br2 CrBrTe HrCrBdTe BxSw3DCrTe'>Theme</button>
<button class='Bn BdNe CrRd Br2 CrBrRd HrCrBdRd BxSw3DCrRd'>Red</button>
<button class='Bn BdNe CrYw Br2 CrBrYw HrCrBdYw BxSw3DCrYw'>Yellow</button>
<button class='Bn BdNe CrOe Br2 CrBrOe HrCrBdOe BxSw3DCrOe'>Orange</button>
<button class='Bn BdNe CrBe Br2 CrBrBe HrCrBdBe BxSw3DCrBe'>Blue</button>
<button class='Bn BdNe CrGn Br2 CrBrGn HrCrBdGn BxSw3DCrGn'>Green</button>
<button class='Bn BdNe CrPk Br2 CrBrPk HrCrBdPk BxSw3DCrPk'>Pink</button>
<button class='Bn BdNe CrPe Br2 CrBrPe HrCrBdPe BxSw3DCrPe'>Purple</button>
<button class='Bn BdNe CrGy Br2 CrBrGy HrCrBdGy BxSw3DCrGy'>Gray</button>
<button class='Bn BdNe CrBk Br2 CrBrBk HrCrBdBk BxSw3DCrBk'>Black</button>
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...