Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do i create this shadow effect? Reply To: How do i create this shadow effect?

#157390
Merri
Participant

http://codepen.io/Merri/pen/jGbiz

Only the part that is of interest:

.your-topbar-element:after {
  border-radius: 0 0 100% 100%;
  box-shadow: 0 1em .5em rgba(64, 48, 0, .4);
  content: '';
  bottom: .5em;
  left: 1em;
  right: 1em;
  top: 0;
  position: absolute;
  z-index: -1;
}

The after pseudo element is the only thing required, and position: relative; on the parent element in addition to the properties above.

Just adjust the left and right values in the pseudo element and that lets you align the shadow to the position you want it to appear in.