---
title: Elevation
description: "Elevation is a core component that renders shadow, using the library's shadow system.."
type: images
slug: /components/elevation/
keywords: ['elevation', 'shadow', 'depth']
---

# Elevation

`Elevation` is a core component that renders shadow, using the library's shadow system.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/core/elevation.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

The shadow effect is generated using the `value` prop.

```jsx live
import { Elevation, Surface, Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<View css={[ui.padding(5)]}>
			<Surface css={[ui.padding(5)]}>
				<Text>Into The Unknown</Text>
				<Elevation value={5} />
			</Surface>
		</View>
	);
}
```

## Props

##### active

**Type**: `number`

Renders the active (interaction) shadow value.

##### borderRadius

**Type**: `string`,`number`

Renders the border-radius of the shadow.

##### focus

**Type**: `number`

Renders the focus (interaction) shadow value.

##### hover

**Type**: `number`

Renders the hover (interaction) shadow value.

##### isInteractive

**Type**: `boolean`

Determines if hover, active, and focus shadow values should be automatically calculated and rendered.

##### offset

**Type**: `number`

Dimensional offsets (margin) for the shadow.

##### value

**Type**: `number`

Size of the shadow, based on the Style system's elevation system. The `value` determines the strength of the shadow, which sense of depth.
In the example below, `isInteractive` is activated to give a better sense of depth.

<!-- /Automatically Generated -->
<!-- /props -->

## See Also

-   [Surface](../surface/)
-   [View](../view/)