> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/design-pricinples/shadow.md).

# Shadow

### Usage

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

![](/files/yfF4DzY5VK8WfPL5eqa6)

![](/files/FdAoTUXqwe0TohTw92zR) ![](/files/ls5t4wxAD41kQqgWbMP8)

### Soft shadow

The soft shadow creates a more natural and clean feel to the interface. The default **elevation** value we use is **4px**.

#### 1. Light theme

**The opacity (12 - 20%)** and **the higher level of blur (32 - 40px)** - This configuration builds a soft shadow for the light theme.

![](/files/2PqCb62upDsLR5uWPxEQ)

#### 2. Dark theme

**The opacity (32 - 40%)** and **the higher level of blur (32 - 44px)** - This configuration builds a soft shadow for the dark theme.

![](/files/uhrBOeanEKhwU1PD88v7)

### Sample code

```
// Some code
```