Trouble with card shadow

1

Here is the codepen I’m referencing: https://codepen.io/colesam/pen/ryQEdP/

Here is the CSS code for my shadow:

.large-card-shadow 
{
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.6);
}

On the right side of my jumbotron, the background appears to be slightly darker than the left side. I’d like the shadow on both sides of the card to be somewhat symmetric, but I’m fairly unknowledgable on how this card shadow works.

I tried looking here: https://www.w3schools.com/css/css3_shadows.asp

Unfortunately the topic seems beyond me. Does anyone have any better resources on how to learn about creating shadows or some simple advice on how to make this shadow more symmetric?

2

Hello there!

I had look at how it is rendered on CodePen and could not notice the difference in shadow that you mentioned. In fact, there shouldn’t be any difference based on your code—the first parameter of the box-shadow property is horizontal offset, which is 0 in both shadow layers that you have.

The MDN reference is much more comprehensive (here) and should clear up on what each parameter does for you.

I hope that helps! :slight_smile:

1 Like
3

Thank you very much!