DGA elevation shadows and backdrop blurs.
Mobile · 375px
| Utility | Value |
|---|---|
Utility:shadow-xs | Value:0px 1px 2px 0px rgb(16 24 40 / 0.05) |
Utility:shadow-sm | Value:0px 1px 2px 0px rgb(16 24 40 / 0.05), 0px 1px 3px 0px rgb(16 24 40 / 0.05) |
Utility:shadow-md | Value:0px 2px 4px -2px rgb(16 24 40 / 0.06), 0px 4px 8px -2px rgb(16 24 40 / 0.1) |
Utility:shadow-lg | Value:0px 4px 6px -2px rgb(16 24 40 / 0.03), 0px 12px 16px -4px rgb(16 24 40 / 0.08) |
Utility:shadow-xl | Value:0px 8px 8px -4px rgb(16 24 40 / 0.03), 0px 20px 24px -4px rgb(16 24 40 / 0.08) |
Utility:shadow-2xl | Value:0px 24px 48px -12px rgb(16 24 40 / 0.18) |
Utility:shadow-3xl | Value:0px 32px 64px -12px rgb(16 24 40 / 0.14) |
Utility:backdrop-blur-sm | Value:blur(8px) |
Utility:backdrop-blur-md | Value:blur(16px) |
Utility:backdrop-blur-lg | Value:blur(24px) |
Utility:backdrop-blur-xl | Value:blur(40px) |
Values come from the Figma effect styles. On the site CSS, shadow-sm uses 6% and 10% opacity; Figma uses 5% for both layers, and DGA UI follows Figma.
Backdrop blurs use backdrop-blur-sm (8px), md (16px), lg (24px) and xl (40px).