I have a menu header:

enter image description here

The drop shadow effects of it as present in the adobe photoshop are:

Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829

I am trying to use the above code in my CSS for my menu header (above) but unfortunately for some reasons I am unable to replicate it. The code which I am using for the menu header are:

position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px so

box-shadow: 0 3px 9px 3px rgba(40,40,40,0.25); --

0 (no offset horizontal) - 3px (3px offset vertical) - 9px (size) - 3px (blur amount) - 40,40,40 (#282829) - 0.25 (25% opacity)

--> jsfiddle <--

The odd part is the spread. The 4th value in box shadow should account for spread but it'll work backwards.. so in this case 3px would equate to 6px spread or 2/3

To be perfectly honest, maybe it's my eyes, but I see no drop shadow in your image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.