Shadows

EUI provides 5 shadow sizes (xs, s, m, l, xl) that can be applied in two directions: down (default) and up.

The provided EUI shadow utilities handle the following additional style adjustments:

• adds a light, 4-sided border style in Dark mode to increase elevated item visibility
• replaces the box-shadow in High Contrast mode with border to ensure visibility in high contrast themes

Usage

✄𐘗
ts code block:
✄𐘗import { euiShadow } from '@elastic/eui';

const styles = css`
  ${euiShadow(euiThemeContext, 's')};
  ${euiShadow(euiThemeContext, 's', { direction: 'up' })};
`;  

Direction: down

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Utility ↦	Value ↵
euiShadow(euiThemeContext, 'xs', { direction: 'down' }) ↦	euiShadow(euiThemeContext, 'xs', { direction: 'down' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px 2px 8px 0px hsla(216.67,29.51%,23.92%,0.04); ↵
euiShadow(euiThemeContext, 's', { direction: 'down' }) ↦	euiShadow(euiThemeContext, 's', { direction: 'down' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px 4px 11px 0px hsla(216.67,29.51%,23.92%,0.05); ↵
euiShadow(euiThemeContext, 'm', { direction: 'down' }) ↦	euiShadow(euiThemeContext, 'm', { direction: 'down' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px 6px 14px 0px hsla(216.67,29.51%,23.92%,0.06); ↵
euiShadow(euiThemeContext, 'l', { direction: 'down' }) ↦	euiShadow(euiThemeContext, 'l', { direction: 'down' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px 8px 17px 0px hsla(216.67,29.51%,23.92%,0.07); ↵
euiShadow(euiThemeContext, 'xl', { direction: 'down' }) ↦	euiShadow(euiThemeContext, 'xl', { direction: 'down' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px 10px 20px 0px hsla(216.67,29.51%,23.92%,0.08); ↵
euiShadowFlat(euiThemeContext, { direction: 'down' })) ↦	euiShadowFlat(euiThemeContext, { direction: 'down' })) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px 2px 8px 0px hsla(216.67,29.51%,23.92%,0.04); ↵

𐘂𐘂

Direction: up

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Utility ↦	Value ↵
euiShadow(euiThemeContext, 'xs', { direction: 'up' }) ↦	euiShadow(euiThemeContext, 'xs', { direction: 'up' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px -2px 8px 0px hsla(216.67,29.51%,23.92%,0.04); ↵
euiShadow(euiThemeContext, 's', { direction: 'up' }) ↦	euiShadow(euiThemeContext, 's', { direction: 'up' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px -4px 11px 0px hsla(216.67,29.51%,23.92%,0.05); ↵
euiShadow(euiThemeContext, 'm', { direction: 'up' }) ↦	euiShadow(euiThemeContext, 'm', { direction: 'up' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px -6px 14px 0px hsla(216.67,29.51%,23.92%,0.06); ↵
euiShadow(euiThemeContext, 'l', { direction: 'up' }) ↦	euiShadow(euiThemeContext, 'l', { direction: 'up' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px -8px 17px 0px hsla(216.67,29.51%,23.92%,0.07); ↵
euiShadow(euiThemeContext, 'xl', { direction: 'up' }) ↦	euiShadow(euiThemeContext, 'xl', { direction: 'up' }) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px -10px 20px 0px hsla(216.67,29.51%,23.92%,0.08); ↵
euiShadowFlat(euiThemeContext, { direction: 'up' })) ↦	euiShadowFlat(euiThemeContext, { direction: 'up' })) ↦	Value box-shadow: 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px -2px 8px 0px hsla(216.67,29.51%,23.92%,0.04); ↵

𐘂𐘂

Dark mode floating border customization

By default the shadow utilities add a light, 4-sided border style in Dark mode. In some cases where different shadowed elements are being composed together, this might result in duplicate neighboring borders. To adjust this, use the border option on the euiShadow utility to adjust or remove the border output.

The additional border is only applied and visible in dark mode.

✄𐘗
ts code block:
✄𐘗import { euiShadow } from '@elastic/eui';

const styles = css`
  ${euiShadow(euiThemeContext, 's', { border: 'none'})}
  ${euiShadow(euiThemeContext, 's', { border: 'all'})}
  ${euiShadow(euiThemeContext, 's', { border: 'top'})}
  ${euiShadow(euiThemeContext, 's', { border: 'bottom'})}
  ${euiShadow(euiThemeContext, 's', { border: 'left'})}
  ${euiShadow(euiThemeContext, 's', { border: 'right'})}
  ${euiShadow(euiThemeContext, 's', { border: 'horizontal'})}
  ${euiShadow(euiThemeContext, 's', { border: 'vertical'})}
`;  

Loading...

Scroll behavior

Do not combine shadow utils and scroll behavior styles on the same element

Combining EUI shadow utils like euiShadow() and scroll behavior (e.g. via overflow: scroll or overflow: auto) on the same element will cause the floating border in DARK mode to be scrolled. If you want to combine both, separate the styles onto different elements by placing the shadow util on the outer wrapper and the scroll behavior on the inner one.

✄𐘗
ts code block:
✄𐘗import { euiShadow } from '@elastic/eui';
import { css } from '@emotion/react';

const Component = () => {
  const euiThemeContext = useEuiTheme();

  const shadowStyles = css`
    ${euiShadow(euiThemeContext, 's')};
  `;
  const scrollContainerStyles = css`
    max-height: 100px;
    overflow-y: auto;
    /* specific scroll bar styling */
    ${useEuiScrollBar()};
  `;

  return (
    <div css={shadowStyles}>
      <div css={scrollContainerStyles}>
        // scrollable content
      </div>
    </div>
  );
}

Loading...

Hover states

Each shadowed surface, when interactive, follows the same hover effect rule: it moves up one level.

• xs hovered → s
• s hovered → m
• m hovered → l
• l hovered → xl
• xl hovered → hover.xl

You don't need to remember this rule though. You can instead use the available euiShadowHover utility which applies the expected hover shadow based on the base size.

Loading...