CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Shadow

CSS gives you ability to add shadow effects to the elements.

Box-Shadow

Text Shadow

Text Shadow

Text Shadow

Text Shadow


CSS Shadow Effects

Use the following properties to add shadow effects to an element:


CSS Text Shadow

The text-shadow property adds shadow to text.

Text Shadow

In the following example (3px) is horizontal shadow, (2px) is vertical shadow, (4px) is blur radius and (blue) is the shadow color:

Run code

The text-shadow property accepts a comma-separated list of shadows to be applied to the text:

Text Shadow

Run code

CSS Box Shadow

The box-shadow property is used to add shadow effects around an element.

Syntax:
box-shadow: offset-x offset-y blur spread color;

In the following example (first 10px) is horizontal offset, (second 10px) is vertical offset, and rgba() specifies color of the shadow:

Run code

The following example adds a blur effect to the shadow:

Run code

Use the inset keyword to apply the shadow inside of the element's box.

Inset shadows are drawn inside the border, above the background, but below content.

Run code

The following example adds box-shadow on mouse hover:

Run code

You can specify multiple effects separated by commas.

An example of using the box-shadow property to create cards:

WED

03 Jul 2019

Caption

Run code

CSS Shadow properties

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text