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

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Text Shadows Outset

Enhance Depth with Outset Shadow Effects

Create a soft, recessed effect using inset box shadows to add a sense of depth and realism to your UI. Whether it's for buttons, cards, or containers, inset shadows create a visually appealing, embossed look that enhances your design aesthetics.

Key Features:

Realistic Depth: Simulates light and shadow for a natural, embedded effect.
Easy Implementation: Use predefined classes to quickly apply inset shadows to elements.
Fully Customizable: Adjust intensity, blur, and positioning for precise control.
Performance Optimized: Lightweight CSS ensures smooth rendering and fast performance.
Cross-Browser Support: Consistent behavior across all modern browsers for a seamless user experience.

Basic Shadow

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrBk TtSwCrTe'>Theme</h1>
<h1 class='CrBk TtSwCrRd'>Red</h1>
<h1 class='CrBk TtSwCrYw'>Yellow</h1>
<h1 class='CrBk TtSwCrOe'>Orange</h1>
<h1 class='CrBk TtSwCrBe'>Blue</h1>
<h1 class='CrBk TtSwCrGn'>Green</h1>
<h1 class='CrBk TtSwCrPk'>Pink</h1>
<h1 class='CrBk TtSwCrPe'>Purple</h1>

Shadow As Text Outline

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrWe TtSwOeCrTe'>Theme</h1>
<h1 class='CrWe TtSwOeCrRd'>Red</h1>
<h1 class='CrWe TtSwOeCrYw'>Yellow</h1>
<h1 class='CrWe TtSwOeCrOe'>Orange</h1>
<h1 class='CrWe TtSwOeCrBe'>Blue</h1>
<h1 class='CrWe TtSwOeCrGn'>Green</h1>
<h1 class='CrWe TtSwOeCrPk'>Pink</h1>
<h1 class='CrWe TtSwOeCrPe'>Purple</h1>

Pretty Shadow

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrWe TtSwOeCrTe'>Theme</h1>
<h1 class='CrWe TtSwOeCrRd'>Red</h1>
<h1 class='CrWe TtSwOeCrYw'>Yellow</h1>
<h1 class='CrWe TtSwOeCrOe'>Orange</h1>
<h1 class='CrWe TtSwOeCrBe'>Blue</h1>
<h1 class='CrWe TtSwOeCrGn'>Green</h1>
<h1 class='CrWe TtSwOeCrPk'>Pink</h1>
<h1 class='CrWe TtSwOeCrPe'>Purple</h1>

Glow Shadow

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrBk TtSwGwCrTe'>Theme</h1>
<h1 class='CrBk TtSwGwCrRd'>Red</h1>
<h1 class='CrBk TtSwGwCrYw'>Yellow</h1>
<h1 class='CrBk TtSwGwCrOe'>Orange</h1>
<h1 class='CrBk TtSwGwCrBe'>Blue</h1>
<h1 class='CrBk TtSwGwCrGn'>Green</h1>
<h1 class='CrBk TtSwGwCrPk'>Pink</h1>
<h1 class='CrBk TtSwGwCrPe'>Purple</h1>

Text Shadow Solid

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrBk TtSwSdCrTe'>Theme</h1>
<h1 class='CrBk TtSwSdCrRd'>Red</h1>
<h1 class='CrBk TtSwSdCrYw'>Yellow</h1>
<h1 class='CrBk TtSwSdCrOe'>Orange</h1>
<h1 class='CrBk TtSwSdCrBe'>Blue</h1>
<h1 class='CrBk TtSwSdCrGn'>Green</h1>
<h1 class='CrBk TtSwSdCrPk'>Pink</h1>
<h1 class='CrBk TtSwSdCrPe'>Purple</h1>

Text Shadow Left Solid

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrTe TtSwLtSdCrTe'>Theme</h1>
<h1 class='CrRd TtSwLtSdCrRd'>Red</h1>
<h1 class='CrYw TtSwLtSdCrYw'>Yellow</h1>
<h1 class='CrOe TtSwLtSdCrOe'>Orange</h1>
<h1 class='CrBe TtSwLtSdCrBe'>Blue</h1>
<h1 class='CrGn TtSwLtSdCrGn'>Green</h1>
<h1 class='CrPk TtSwLtSdCrPk'>Pink</h1>
<h1 class='CrPe TtSwLtSdCrPe'>Purple</h1>

Blur Shadow

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrTt TtSwBrCrTe'>Theme</h1>
<h1 class='CrTt TtSwBrCrRd'>Red</h1>
<h1 class='CrTt TtSwBrCrYw'>Yellow</h1>
<h1 class='CrTt TtSwBrCrOe'>Orange</h1>
<h1 class='CrTt TtSwBrCrBe'>Blue</h1>
<h1 class='CrTt TtSwBrCrGn'>Green</h1>
<h1 class='CrTt TtSwBrCrPk'>Pink</h1>
<h1 class='CrTt TtSwBrCrPe'>Purple</h1>

Text Shadow Right Solid

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrTe TtSwRtSdCrTe'>Theme</h1>
<h1 class='CrRd TtSwRtSdCrRd'>Red</h1>
<h1 class='CrYw TtSwRtSdCrYw'>Yellow</h1>
<h1 class='CrOe TtSwRtSdCrOe'>Orange</h1>
<h1 class='CrBe TtSwRtSdCrBe'>Blue</h1>
<h1 class='CrGn TtSwRtSdCrGn'>Green</h1>
<h1 class='CrPk TtSwRtSdCrPk'>Pink</h1>
<h1 class='CrPe TtSwRtSdCrPe'>Purple</h1>

Text Shadow Multiple

Theme

Red

Yellow

Orange

Blue

Green

Pink

Purple

Source Code


<h1 class='CrTe TtSwMeCrTe'>Theme</h1>
<h1 class='CrRd TtSwMeCrRd'>Red</h1>
<h1 class='CrYw TtSwMeCrYw'>Yellow</h1>
<h1 class='CrOe TtSwMeCrOe'>Orange</h1>
<h1 class='CrBe TtSwMeCrBe'>Blue</h1>
<h1 class='CrGn TtSwMeCrGn'>Green</h1>
<h1 class='CrPk TtSwMeCrPk'>Pink</h1>
<h1 class='CrPe TtSwMeCrPe'>Purple</h1>

Web Tool

Welcome Amit

Logout

Change Password

Change Email