logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • 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
Height
Light Source
Shadow Values
Common Shadow Usage Design Table

Shadow

contributors
    • Dark ModeOverview

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    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

    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