---
title: "Components — Scrim"
canonical: https://sky-ui.cf.sky.com/components/scrim
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Scrim

Provides a container with an eased gradient with the specified colour from solid to transparent.

```js
import { Scrim } from '@sky-uk/ui-core';
```

---

`Scrim` provides a container with an eased gradient with a specified color from solid to transparent.

```tsx
<Scrim $backgroundColor="products.glass.up" $height="100px" />
```

---

## Props

### $backgroundColor

`$backgroundColor` supports any of the [system colors](http://sky-ui.cf.sky.com/core/foundation/colours/).

The following directions can also be applied:

- `up` - Default direction from bottom to top.
- `right` - From left to right.
- `left` - From right to left.
- `down` - From top to bottom.

The direction key is appended to the `$backgroundColor` value using dot notation. For example a `Scrim` with `grey40` from right to left would be:

```tsx
<Scrim $backgroundColor="grey40.left" $height="100px" />
```

### $pointerEvents

`$pointerEvents` supports standard CSS [pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).

By default this is set to `auto`. Should the `Scrim` be used in a context where it is stacked above an interactive element it can be set to `none`.

All `children` will retain their interactivity regardless of the `$pointerEvents` setting on the `Scrim`.

```tsx
<Box $height="100px" $position="relative">
    <Button>Click me</Button>
    <Scrim $pointerEvents="none" $position="absolute" $top="0" $right="0" $bottom="0" $left="0" />
</Box>
```

---

## System Modifiers

The `Scrim` component supports the props applied using the following system functions:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [position](/core/system/position/)
- [width](/core/system/width/)

---