CSS Visual Directory
Hard Offset Shadow
A solid shadow with no blur, offset down and right like a printed sticker.
Edit Hard Offset Shadow
Change any value to see it update live.
About this entry
What it is
A solid shadow with no blur, offset down and right like a printed sticker.
Neo-brutalist layouts, badges and buttons that want a graphic rather than a lit look.
Copy & use
How to copy and use hard offset shadow
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Neo-brutalist layouts, badges and buttons that want a graphic rather than a lit look.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
A solid shadow with the blur set to zero, so it reads as a graphic offset rather than as light. This is the shadow of print and sticker design, not of physics.
6px 6px- Offset down and right. Equal values keep the angle at a clean 45 degrees.
0- Blur radius. Zero is the entire point — any blur softens it into a normal shadow.
#1c1917- A solid opaque colour, usually the same ink as the border.
Making it yours
How to adjust hard offset shadow
Pair it with a matching solid border and the shape reads as one object. Shifting the element by the same offset on hover produces the press effect this style is known for.
Worth knowing before you ship it
It commits the whole design to a graphic style. Mixed with soft shadows elsewhere on the page, both look like mistakes.
Common questions
Using hard offset shadow
What is hard offset shadow?
A solid shadow with no blur, offset down and right like a printed sticker. Neo-brutalist layouts, badges and buttons that want a graphic rather than a lit look.
Where do I put the hard offset shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Neo-brutalist layouts, badges and buttons that want a graphic rather than a lit look. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will hard offset shadow work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise hard offset shadow after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing