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

CSS box-shadow is a powerful tool for creating dynamic, eye-catching visual effects on web pages. It allows developers to add drop shadows, inner shadows, and other visual effects to elements on a webpage. Box-shadow is a part of the CSS3 specification and is supported by all modern web browsers.

Box-shadow is a simple way to add depth and dimension to a webpage. It can be used to create subtle visual effects, such as adding a drop shadow to text, or to create more dramatic effects, such as adding a 3-dimensional look to a button. The syntax for the box-shadow property is relatively simple and allows developers to easily control the size, color, and position of the 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, and 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);
}