Mastering Box Shadows in CSS: Elevate Your Web Design with Shadow Effects

In CSS, the box-shadow property is used to add shadow effects to elements on a web page, creating a sense of depth and dimensionality. It allows web developers and designers to apply various types of shadows, such as drop shadows and inner shadows, to elements like divs, buttons, images, and other HTML elements.

Syntax

selector {
  box-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <spread-radius> <color> <inset>;
}

Let's break down the values:

<horizontal-offset>: It represents the horizontal distance the shadow is offset from the element. A positive value moves the shadow to the right, while a negative value moves it to the left.
<vertical-offset>: This value represents the vertical distance the shadow is offset from the element. A positive value moves the shadow down, while a negative value moves it up.
<blur-radius>: It specifies the blurriness or softness of the shadow. A larger value creates a more blurred shadow, while a smaller value results in a sharper shadow.
<spread-radius>: This value determines the size of the shadow. A positive value increases the size of the shadow, while a negative value decreases it.
<color>: It sets the color of the shadow. You can use named colors, hexadecimal values, RGB or RGBA values, or HSL or HSLA values to specify the shadow color.
<inset> (optional): Adding the inset keyword will create an inner shadow instead of the default drop shadow, giving the impression that the element is sunken inside the container.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutor Joes</title>
    <style>
    .box
    {
      height: 150px;
      width:150px;
      background:#FE6525;
      margin:30px;
      float:left;
    }
    .shadow
    {
      -webkit-box-shadow: 5px 5px 1px 0px rgba(0,0,0,0.15);
      -moz-box-shadow: 5px 5px 1px 0px rgba(0,0,0,0.15);
      box-shadow: 5px 5px 1px 0px rgba(0,0,0,0.15);
    }
    .shadow1{
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }
    .shadow2{
          box-shadow: inset 3px 3px 5px #888;
    }
    .shadow3{
         box-shadow: 2px 2px 5px #555,
                    -2px -2px 5px #555;
    }
    </style>
</head>
<body>
    <h1>Box Shadow In CSS</h1>
    <div class="box shadow"></div>
    <div class="box shadow1"></div>
    <div class="box shadow2"></div>
    <div class="box shadow3"></div>
</body>
</html>

Mastering Box Shadows in CSS: Elevate Your Web Design with Shadow Effects

Syntax

Source Code

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects