CSS box-shadow

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

box-shadow

The box-shadow CSS property adds shadow effects around an element’s frame.

Property Values:

• Offset-X Offset-Y : These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. <offset-y> specifies the vertical distance.
• Blur-radius : The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
• Spread-radius : Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
• Color : For the set color of the shadow.
• Global keywords:| inset |initial | inherit;

div{
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 2px 2px 2px 1px blue);
}