---
title: CSS Box Shadow
description: "## SS box-shadow Property The CSS `box-shadow` property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow: This is a yellow element with a black box-shadow `div { box-shadow: 10px 10px; }` Next,…"
url: "https://apprentice.mn/docs/css-box-shadow/"
updated: "2021-05-11"
category: CSS
---

# CSS Box Shadow

## SS box-shadow Property

The CSS `box-shadow` property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

     This is a yellow <div> element with a black box-shadow      `div {
  box-shadow: 10px 10px;
}`

Next, add a color to the shadow:

     This is a yellow <div> element with a grey box-shadow     `div {
  box-shadow: 10px 10px grey;
}`

Next, add a blur effect to the shadow:

             This is a yellow <div> element with a blurred, grey box-shadow             `div {
  box-shadow: 10px 10px 5px grey;
}`

## Cards

You can also use the `box-shadow` property to create paper-like cards:

## Cards

The box-shadow property can be used to create paper-like cards:

# 1

January 1, 2016

         ![Svkhbaatar](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/44.jpg)

Svkhbaatar square,Mongolia

               `div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}`

## CSS Shadow Properties

The following table lists the CSS shadow properties:

| Property | Description |
| --- | --- |
| box-shadow | Adds one or more shadows to an element |
| text-shadow | Adds one or more shadows to a text |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-box-shadow%2F&linkname=CSS%20Box%20Shadow)[https://www.addtoany.com/share](https://www.addtoany.com/share)