Box-shadow only cutting off


not sure why it cuts off, here’s the jsfiddle

The element is the height of the viewport, not the full page height.

It is kind of hard to give an answer without some more context about the page and the actual content it will have but one option is to just propagate the height down.

html,
body {
  height: 100%;
}

.holder {
  min-height: 100%;
}
1 Like

thanks, this fixed it, i’m not sure if this is allowed but i have another question


is it possible to make the dropshadow above this line slowly fade out?
here’s an updated jsfiddle

At that point, I feel like it is really more of a vertical linear-gradient. Maybe you can add two pseudo-elements using :before and :after (for each side) and have a linear-gradient that fades to transparent. Or maybe just a single element underneath it that is a bit wider (so it peeks out at the edges) that is using a linear-gradient that fades to transparent (but that might not work depending on if it should fade to the background color of the outside or the element it is below).

Using an SVG might also be an option. So a thin SVG on each side that fade from black to transparent.

Didn’t test any of this.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.