<h2>Elevation values</h2>
<p>Each elevation level produces a three-dimensional appearance to an object with shadows and blur spans applied. As the elevation levels increase from 1 to 4, the elevation level’s shadow and blur span increases along the X-axis and Y-axis. This increase in elevation level allows the object to achieve a three-dimensional appearance of more depth along the Z-axis. There are three different options for elevation positioning: left shadows, bottom shadows, and right shadows. See <a href="/foundations/elevation/#light-position">light positioning guidance</a>.</p>
<details data-name='image-block' data-images='[{"alt":"The design system offers 3 shadow positions: left, bottom, and right. Each has 4 levels of elevation, shown here from lowest to highest.","caption":"The design system offers three shadow positions: left, bottom, and right. Each has four levels of elevation, shown here from lowest to highest.\n\n**A**: Elevation levels 1 through 4, showing left shadow treatment\n\n**B**: Elevation levels 1 through 4, showing bottom shadow treatment\n\n**C**: Elevation levels 1 through 4, showing right shadow treatment","url":"https://dds.dell.com/site/stage/59/f2/Elevation_Values_212007_V1_936a0aef9b.png"}]' data-numberofcolumns='1'></details>

<h2>Elevation settings</h2>
<p>While the UI kits will automatically contain the correct settings by level, it’s important to understand how those values are configured. Also note that when increasing elevation levels, the defined axes weight and blur increases.</p>
<p><strong>X-axis</strong>: This is the offset of the drop shadow along the horizontal plane or X-axis, which controls the top and bottom shadow.<br><strong>Y-axis</strong>: This is the offset of the drop shadow along the vertical plane or Y-axis, which controls the direction of the right and left shadows.<br><strong>Blur</strong>: This adjusts the blur or feathering of the shadow color.<br><strong>Spread</strong>: This adjusts the size of the shadow to represent the distance between the foreground and background.<br><strong>Inner shadow</strong>: Inner shadows can be used to simulate depths to make something look sunken, for example. The shadow will be applied within the layer or object and is contained within the layer’s bounds.<br><strong>Drop shadow</strong>: This shadow is applied to the outside of the layer, creating the illusion of three-dimensionality.</p>
<h2>Usage</h2>
<p>Elevation is commonly used to create distance between objects, to set the direction of a light source, to make objects stand out against a background, and to give more dimension to elements.</p>
<h3>To distinguish between two levels of elevation</h3>
<p>If there are two different levels of elevation in an experience, raise the elevation level on the highest-priority item to eliminate confusion and differentiate between surfaces.</p>
<details data-name='image-block' data-images='[{"alt":"Different levels of elevation should be layered to show contrast between design elements. Here, the modal notification is given a higher visual priority through a higher elevation level than the cards behind it.","caption":"Different levels of elevation should be layered to show contrast between design elements. Here, the modal notification is given a higher visual priority through a higher elevation level than the cards behind it.","url":"https://dds.dell.com/site/stage/47/2c/Elevation_Guidelines_Two_Levels_212007_V1_ce499e98ba.png"}]' data-numberofcolumns='1'></details>

<h3>For overlapping experiences</h3>
<p>Elevation is commonly used with <a href="/components/notification">notifications</a> that require user interaction or when backgrounds are the same color but don’t offer enough contrast. Adding more depth to objects helps prioritize that action above others.</p>
<details data-name='image-block' data-images='[{"alt":"To highlight the priority of this notification, this example uses elevation to draw the user’s attention to that element and highlight its importance on the page.","caption":"To highlight the priority of this notification, this example uses elevation to draw the user’s attention to that element and highlight its importance on the page.","url":"https://dds.dell.com/site/production/c1/77/Elevation_Guidelines_Overlapping_212007_V1_3daf3f6ae9.png"}]' data-numberofcolumns='1'></details>

<h3>To distance objects or highlight motion</h3>
<p>For some components, elevation is used for hover states, such as an <a href="/components/accordion">accordion</a> hover.</p>
<details data-name='image-block' data-images='[{"alt":"Elevation can form a part of an element’s hover state in order to highlight a user’s interaction with it more clearly.","caption":"Elevation can form a part of an element’s hover state in order to highlight a user’s interaction with it more clearly.","url":"https://dds.dell.com/site/stage/45/f9/Elevation_Guidelines_Distance_Highlights_212007_V1_00bd6ca296.png"}]' data-numberofcolumns='1'></details>

<h3>To show visual hierarchy</h3>
<p>The higher an object is along the Z-axis, the more depth it will appear to have, helping users visually prioritize that element above others. Lowering the Z-axis value makes the object appear flatter.</p>
<details data-name='image-block' data-images='[{"alt":"Objects exist in a three-dimensional plane at different depths, represented here by the Y-axis.","caption":"Objects exist in a three-dimensional plane at different depths, represented here by the Y-axis. Each higher depth uses increased shadows to create four levels of elevation:\n\n1. Elevation Level 1 in this diagram will appear to have the least amount of depth on a page because it falls lower on the Z-axis.\n2. Elevation Level 2 is higher on the Z-axis, rising above Level 1.\n3. Elevation Level 3 will fall between the highest level and the lowest levels of elevation.\n4. Elevation Level 4 is the highest on the Z-axis and will appear to have the most depth and dimension on a page.","url":"https://dds.dell.com/site/stage/2b/3a/Elevation_Guidelines_Visual_Hierarchy_212007_V1_9255341158.png"}]' data-numberofcolumns='1'></details>

<h2>Light position</h2>
<p>The elevation direction is dictated by the component’s position. Make sure to choose one light source direction per screen or experience for consistency.</p>
<details data-name='image-block' data-images='[{"alt":"This is an alternative text for the image 1","caption":"**Left shadow**: Light is cast from the right side and the shadow appears on the left side.","url":"https://dds.dell.com/site/stage/09/a9/Elevation_Light_Position_45_Left_Shadow_212007_V1_8d89f01069.png"},{"alt":"This is an alternative text for the image 2","caption":"**Bottom shadow**: Light is cast from the top and the shadow appears on the bottom.","url":"https://dds.dell.com/site/stage/12/36/Elevation_Light_Position_90_Center_Shadow_212007_V1_af04042491.png"},{"alt":"This is an alternative text for the image 3","caption":"**Right shadow**: Light is cast from the left side and the shadow appears on the right side.","url":"https://dds.dell.com/site/stage/a6/12/Elevation_Light_Position_135_Right_Shadow_212007_V1_c8375587a9.png"}]' data-numberofcolumns='3'></details>

<h2>Choosing elevation</h2>
<p>When deciding which elevation level to use, consider these best practices:</p>
<p><strong>Narrow a user’s focus by increasing elevation</strong>
Users will focus more on objects that appear closer to the eye. If you want users to prioritize one action above others, increase the elevation level.</p>
<p><strong>Choose an elevation that simulates real lighting</strong>
Ambient light requires a softer edge or less elevation, whereas more direct light would use a higher contrasting shadow or elevation level.</p>
<p><strong>Don’t overuse elevation</strong>
Applying elevation to too many objects can lead to a poor experience that distracts the user. Use it sparingly.</p>
<h2>Elevation color: light mode</h2>
<details data-name='color-collection' data-colors='[{"color":"Blue 900, #002A58","useCase":"Shadow Light","opacity":1,"colorBorder":""}]' data-displaymode='colorTableRGBA'></details>

<h2>Accessibility</h2>
<p><strong>Don’t use a shadow for style only</strong>
Drop shadows or similar effects create confusion for sighted users when viewed alongside elevated elements, and should be avoided.</p>
<h2>Storybook demos</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla.delldesignsystem.com/?path=/story/foundations-elevation--page","type":"External"},"title":"Vanilla elevation demo","description":"View the elevation demo and code in Vanilla.","icon":"metadata"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://angular.delldesignsystem.com/?path=/story/foundations-elevation--page","type":"External"},"title":"Angular elevation demo","description":"View the elevation demo and code in Angular.","icon":"angular"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://react.delldesignsystem.com/index.html?path=/docs/foundations-elevation--docs","type":"External"},"icon":"react","title":"React elevation demo","description":"View the elevation demo and code in React."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.

Elevation

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
