logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.22.2
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations

Shadow

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Shadow originates from the physical phenomenon of reflecting the distance between objects in real life. For the user interface (UI), we often simulate this through element projection to inform the user about the height distance and layer hierarchy between elements.

Height

Shadows are produced by two surfaces at different levels, and the intensity is determined by the distance between them. Therefore, the height of an object directly affects its shadow. The farther an object is from the ground, the larger and blurrier the shadow becomes. We will divide the system into four UI levels: none, low, medium, and high, each distributed across different height levels, with varying shadow properties.

height levels

Layer 0: When an object is close to the ground, its shadow overlaps completely with the object itself. In the UI, no shadow value is defined for this layer. For example: input boxes.

height layer 0

Layer 1: When an object appears at the low level, it enters a floating state when manipulated (hovered, clicked, etc). Once the operation is completed or canceled, the hover state feedback disappears, and the object returns to its original level. For example: card hovering.

height layer 1

Layer 2: When an object appears at the medium level, it expands and follows the relationship with the reference layer. The object opens from elements on the ground and moves with the movement of the elements at that level. For example: dropdown panels.

height layer 2

Layer 3: When an object appears at the high level, its movement is independent of other levels. For example: dialog boxes.

height layer 3

Light Source

The direction of a shadow is determined by the relative position of the light source and the object. Assuming the height of the light source remains constant, the distance between the light source and the object, as well as the distance between the object and the shadow, are directly proportional. The further away the light source, the further away the shadow from the object. In the UI, the direction of shadows is typically represented using the X, Y coordinates.

light source

Shadow Values

As mentioned above, shadows are generated by illumination. The main factors affecting their values are the height of the object and the position of the light source:

  1. At different heights, the shadow's color, blur, and area vary. Objects further from the ground produce lighter shadows with higher blur and larger area, while those closer to the ground create darker shadows with lower blur and smaller area.

  2. The direction of the projection is primarily determined by the relative position of the light source and the object.

In Ant Design, different shadow directions are used in various contexts:

  • Downwards Shadow: mainly used inside components or the components themselves, which is the most common use case.
  • Upwards Shadow: mainly applied to bottom navigation or toolbars, etc.
  • Leftwards Shadow: mainly used in right-side navigation bars, drawer components, or fixed table headers.
  • Rightwards Shadow: mainly used in left-side navigation bars, drawer components, or fixed table headers.

Shadow simulates real-world feedback. To make shadows more realistic, Ant Design adopted a three-layer shadow expression method in version 4.0, making shadows softer and more realistic.

shadow value

Common Shadow Usage Design Table

Layer One:

Shadow Type Shadow Color (rgba) Direction (X, Y) Blur Spread
@shadow-1-up rgba(0, 0, 0, 0.16) 0px, -1px 2px -2px
rgba(0, 0, 0, 0.12) 0px, -3px 6px 0px
rgba(0, 0, 0, 0.09) 0px, -5px 12px 4px
@shadow-1-down rgba(0, 0, 0, 0.16) 0px, 1px 2px -2px
rgba(0, 0, 0, 0.12) 0px, 3px 6px 0px
rgba(0, 0, 0, 0.09) 0px, 5px 12px 4px
@shadow-1-left rgba(0, 0, 0, 0.16) -1px, 0px 2px -2px
rgba(0, 0, 0, 0.12) -3px, 0px 6px 0px
rgba(0, 0, 0, 0.09) -5px, 0px 12px 4px
@shadow-1-right rgba(0, 0, 0, 0.16) 1px, 0px 2px -2px
rgba(0, 0, 0, 0.12) 3px, 0px 6px 0px
rgba(0, 0, 0, 0.09) 5px, 0px 12px 4px

Layer Two:

Shadow Type Shadow Color (rgba) Direction (X, Y) Blur Spread
@shadow-2-up rgba(0, 0, 0, 0.12) 0px, -3px 6px -4px
rgba(0, 0, 0, 0.08) 0px, -6px 16px 0px
rgba(0, 0, 0, 0.05) 0px, -9px 28px 8px
@shadow-2-down rgba(0, 0, 0, 0.12) 0px, 3px 6px -4px
rgba(0, 0, 0, 0.08) 0px, 6px 16px 0px
rgba(0, 0, 0, 0.05) 0px, 9px 28px 8px
@shadow-2-left rgba(0, 0, 0, 0.12) -3px, 0px 6px -4px
rgba(0, 0, 0, 0.08) -6px, 0px 16px 0px
rgba(0, 0, 0, 0.05) -9px, 0px 28px 8px
@shadow-2-right rgba(0, 0, 0, 0.12) 3px, 0px 6px -4px
rgba(0, 0, 0, 0.08) 6px, 0px 16px 0px
rgba(0, 0, 0, 0.05) 9px, 0px 28px 8px

Layer Three:

Shadow Type Shadow Color (rgba) Direction (X, Y) Blur Spread
@shadow-3-up rgba(0, 0, 0, 0.08) 0px, -6px 16px -8px
rgba(0, 0, 0, 0.05) 0px, -9px 28px 0px
rgba(0, 0, 0, 0.03) 0px, -12px 48px 16px
@shadow-3-down rgba(0, 0, 0, 0.08) 0px, 6px 16px -8px
rgba(0, 0, 0, 0.05) 0px, 9px 28px 0px
rgba(0, 0, 0, 0.03) 0px, 12px 48px 16px
@shadow-3-left rgba(0, 0, 0, 0.08) -6px, 0px 16px -8px
rgba(0, 0, 0, 0.05) -9px, 0px 28px 0px
rgba(0, 0, 0, 0.03) -12px, 0px 48px 16px
@shadow-3-right rgba(0, 0, 0, 0.08) 6px, 0px 16px -8px
rgba(0, 0, 0, 0.05) 9px, 0px 28px 0px
rgba(0, 0, 0, 0.03) 12px, 0px 48px 16px