Search code examples
cssedgessharp

How to soften overflown edges on CSS

I am trying to soften those sharp edges of the orange div when sub divs got overflown as I scroll down. Can I do that with CSS? Sorry if my explanation is confusing.

screenshot

Solution

  • I've mad you an example, you can add box-shadow to the header and the footer and in that way you can create a blur effect between your elements.

    body{
background-color: #888888;
}

header{
width: 100%;
height: 50px;
box-shadow: 0 10px 8px 10px #888888;
background-color: #888888;

/* this is important so the box-shadow is displayd on top of the next element */
position: relative;
z-index: 1
}

div{
width: 100%;
height: 100px;
background-color: red;
}
    <body>
  <header></header>
  <div> </div>
</body>