Box Shadow in CSS

« Prev Next »

CSS box-shadow property is used to cast shadows on the elements on your webpage. Shadows can add depth, dimension, and visual interest to elements like buttons, cards, or images. You can control the shadow’s position, size, color, spread, and blur radius, allowing you to create a variety of design effects.

css-box-shadow

CSS Box Shadow Syntax

 box-shadow: h-offset v-offset blur-radius spread-radius color inset;
  • h-offset: Horizontal offset (required) — how far the shadow should be placed from the element horizontally. A positive value moves the shadow to the right, and a negative value moves it to the left.
  • v-offset: Vertical offset (required) — how far the shadow should be placed from the element vertically. A positive value moves the shadow down, and a negative value moves it up.
  • blur-radius: Blur radius (optional) — determines how blurry the shadow is. The higher the value, the more blurred the shadow will be.
  • spread-radius: Spread radius (optional) — determines how much the shadow should grow or shrink. A positive value will make the shadow larger, and a negative value will make it smaller.
  • color: Shadow color (optional) — defines the color of the shadow.
  • inset: Inset keyword (optional) — causes the shadow to be drawn inside the element, instead of outside. Without this, the shadow is outside by default.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Box Shadow</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Horizontal offset, Vertical offset, Blur radius, Shadow color */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Run ›

Explanation

  • The box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); rule applies a shadow to the .box element:
  • The shadow is placed 10px to the right (horizontal offset) and 10px down (vertical offset).
  • It has a blur radius of 20px, making the shadow soft and diffused.
  • The color of the shadow is a semi-transparent black (rgba(0, 0, 0, 0.3)).
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.