Shadow

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Comment

No guidelines idea

Shadows provide depth and distinction to UI elements, enhancing the user experience by visually separating content and interactive components. They mimic real-world lighting and perspective, adding a layer of realism to digital interfaces.

Shadows can help highlight important elements, create visual hierarchy, and improve readability by providing a sense of separation between elements.

When used thoughtfully, shadows can contribute to a more engaging and intuitive user experience.

Guidelines

Correct / Incorrect

Takeaways

Usage

Implementation

Properties

Shadow

Type : CSS Variable

--shadow-default

X:

0px

Y:

4px

Radius:

10px

Spread:

0px

Color:

rgba(0, 0, 0, 0.1)

--shadow-big

X:

0px

Y:

0px

Radius:

20px

Spread:

0px

Color:

rgba(0, 0, 0, 0.1)