---
path: foundation/elevation/overview
title: Overview
position: 1
seo_title: Overview of Elevation
seo_description: Learn more about the elevation approaches used to represent
objects and elements when working with the Telerik and Kendo UI components.
---
## Overview of Elevation
Elevation is a design technique that utilizes shadows and visual layering to create a sense of depth and hierarchy between user interface (UI) elements. By suggesting which elements are above others, it helps distinguish components like floating action buttons or elevated cards. Designers can simulate the z-axis in 2D space by adjusting the shadow's intensity and distribution, which enhances the user experience by replicating real-world principles of light.
### Elevation Levels
The Telerik and Kendo UI Design System defines five elevation intensity levels, with Level 1 being the lightest and Level 5—the strongest:
Elevation values vary by theme and swatch. To explore these specifics, click the link for the respective theme: [Meridian](/themes/kendo-themes/meridian/), [Bootstrap](/themes/kendo-themes/bootstrap/), [Material](/themes/kendo-themes/material/), [Fluent](/themes/kendo-themes/fluent/), [Default](/themes/kendo-themes/default/) and [Classic](/themes/kendo-themes/classic/).
### Elevation Settings
While each Telerik and Kendo UI Theme automatically provides the appropriate settings by elevation level, it’s important to understand how those values are configured:
- Horizontal offset (X-axis)—The horizontal displacement of the shadow in relation to the element. A positive value moves the shadow to the right, while a negative value moves it to the left.
- Vertical offset (Y-axis)—The vertical displacement of the shadow in relation to the element. A positive value moves the shadow downwards, while a negative value moves it upwards.
- Blur radius—The amount of blur applied to the shadow. A higher value creates a more diffused and softer shadow.
- Spread radius—The extent of shadow dispersion around an element. A positive value enlarges and highlights the shadow, while a negative value narrows and minimizes it.
- Color—The color of the shadow specified in the RGBA format. The color's opacity determines the shadow's visibility.
### Key Principles
The Telerik and Kendo UI Design System endorses several basic principles related to elevation:
- Visual hierarchy and communication—Elevation help establish a clear hierarchy and indicates how elements relate to each other.
- Elevation for emphasis—To prioritize a specific action, increase its elevation level as users tend to focus more on objects that are closer to their eyes.
- Preserve elevation simplicity—To avoid confusion and cognitive load, elevation is used sparingly.
### Theme-Specific Variables
For specific information about the elevation system, refer to the theme-specific variables list:
