Prev Next

CSS Box Shadow

The box-shadow property in CSS is used to add shadow effects around an element. It offers a variety of customization options, including horizontal and vertical offsets, blur radius, spread radius, and shadow color.

Key Topics

Basic Box Shadow

A basic box shadow applies a shadow to an element with defined offsets, blur radius, and color.

<style>
        .basic-box-shadow {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 20px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }
</style>
<div class="basic-box-shadow">Basic Shadow</div>

Explanation: The shadow has a 5px horizontal and vertical offset, a 10px blur radius, and a semi-transparent black color.

Spread Radius

The spread radius controls the size of the shadow. A positive value expands the shadow, while a negative value contracts it.

<style>
        .spread-shadow {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 20px;
            box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
        }
</style>
<div class="spread-shadow">Spread Shadow</div>

Explanation: The spread radius of 5px expands the shadow outward, making it appear larger.

Multiple Shadows

You can apply multiple shadows to an element by separating each shadow declaration with a comma.

<style>
        .multiple-shadows {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 20px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 255, 0.3);
        }
</style>
<div class="multiple-shadows">Multiple Shadows</div>

Explanation: The element has two shadows: one with a positive offset (5px, 5px) and another with a negative offset (-5px, -5px), each using different colors.

Inset Shadows

The inset keyword creates an inner shadow inside the element instead of the default outer shadow.

<style>
        .inset-shadow {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 20px;
            box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
        }
</style>
<div class="inset-shadow">Inset Shadow</div>

Explanation: The shadow appears inside the element, creating a recessed effect.

Key Takeaways

  • Basic Shadow: Specify horizontal and vertical offsets, blur radius, and color for a standard shadow effect.
  • Spread Radius: Adjust the size of the shadow with positive or negative values.
  • Multiple Shadows: Apply multiple shadows to a single element for more complex effects.
  • Inset Shadows: Use the inset keyword to create inner shadows.
  • Customization: Combine these options to create unique and visually appealing designs.
Prev Next