Skip to content

Instantly share code, notes, and snippets.

@dikaio

dikaio/box-shadow.md

Created December 20, 2023 05:29
Show Gist options
  • Save dikaio/a4049887d3531aad0030a34b3ac41292 to your computer and use it in GitHub Desktop.
Save dikaio/a4049887d3531aad0030a34b3ac41292 to your computer and use it in GitHub Desktop.
Download ZIP
Realistic Box Shadows
Raw
box-shadow.md

Realistic CSS Shadows

box-shadow: x, y, blur, spread, color

Alpha 5%

box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05)
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05)
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05)
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05)
box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.05)
box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.05)

Alpha 6%

box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06)
box-shadow: 0px 1px 1px -0.5px rgba(0, 0, 0, 0.06)
box-shadow: 0px 3px 3px -1.5px rgba(0, 0, 0, 0.06)
box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.06)
box-shadow: 0px 12px 12px -6px rgba(0, 0, 0, 0.06)
box-shadow: 0px 24px 24px -12 rgba(0, 0, 0, 0.06)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment