• Chetneet Chouhan

Day 2: Shadow on black background | little design tip

As I was working on the Tribute page of Dr. Norman Borlaug as it's in the required FreeCodeCamp project, i come across a little problem. And the origin of the problem was me too.


  1. I love the black background.

  2. I love shadows behind images

Here is the terrible result. You can't see shadows.


Trust me bro, there is shadow.


But I wanted both on one website (and on the same page) hence I decided to search. And as it goes, ask and ya shall receive. I did.


I later thanks to this tool, extracted the exact color in RGB. Following was the result.


/* The exact background color of Notion's dark mode */
rgba(47,52,55,255)

I

Hence I plugged this into my project. And here are the results,


Following is the final code snippet particularly of the image.

/* Dr. Norman's cover image */
.cover-image {
  width: 700px;
  box-shadow: 0 10px 20px rgb(0, 0, 0), 0 6px 6px rgb(0, 0, 0);
  align-content: center;
}


Before

Not cool. Can't see shadown

And I can't say: there is shadow, trust me, bro!


After

Getting the best of both world. Black background + black shadow.

Thanks, Notion.


chetneetpatreon.jpg

Get more exclusive essays that aren't published anywhere. Get it on Patreon.

Get insightful and deep essays to your inbox and my latest book by signing up my newsletter

how to consciously learn from internet.j

Featured Essays

Recent posts