FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
Read Thread
I've recently been obsessed with trying to figure out how to put a shadow on a white card style on top of a white background and have it not look bad. It's typically tough to do, usually they look muddy so we either opt for a light grey background or just a simple border.
But awhile back while I was exploring how to make a white background app ui that also utilizes shadows for hierarchy I discovered a method for making this work and it involves using a stack of 3 shadows
So the reason shadows typically struggle on white is because of the lack of contrast or the presence of too much contrast. A light grey background always works so nicely so I decided to look there for inspiration.
It starts with adding literally a light grey background as a shadow and heavily blurring it, this creates a background-esque appearance just around the card it's applied to.
Next, you add your "regular" shadow, this can be a faded black or in my case a dark grey with a subtle blue tint to it.
Lastly, to really punch up the contrast and make it work more reliably we can add a shadow that acts like a border. Why this instead of an actual border? Well I find with it being a 1px blur it adds just a touch of softness to the outline that a border just can't quite deliver.
Add voila 🎉 we have a white on white shadow card style that doesn't feel muddy but that adds some dimension that we wouldn't get from an outline.

My Notes:

Select to add to your #gallery:
Jon Rundle

Pro Curator

$99 /yearPay what you can