CSS fade out left and right edges of div and content

Question

I have a very simple HTML layout show here...

body{
  background:teal;
}

#mycontent{
  background:wheat;
  text-align:center;
  padding:20px;
  margin:20px;
}

<div id="mycontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>

I am tyring to fade out the left and right edges of the div and its content. I have seen various options but am not sure which one is best to go for.

CSS mask-image is listed as experimental so not sure that is the best approach here.

What is my best option to achieve this?

@DennisNovac How in the world does that help??? – Niet the Dark Absol Aug 13 '17 at 11:03 — Niet the Dark Absol, Aug 13 '17 at 11:03

score 1 · Answer 1 · answered Aug 13 '17 at 11:07

Since you have a known background colour, you can overlay a "known BG -> transparent" gradient over the top. For finer control, you can apply it twice: once on the left and once on the right.

body{
  background:teal;
}

#mycontent{
  background:wheat;
  text-align:center;
  padding:20px;
  margin:20px;
  position: relative;
}

#mycontent:after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background-image:
    linear-gradient(to right, #008080, rgba(0,128,128,0) 50px),
    linear-gradient(to left , #008080, rgba(0,128,128,0) 50px);
}

<div id="mycontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>

For more dynamic backgrounds, you will probably need to use actual masking, and just ensure it falls back gracefully in browsers that don't support it.

It's not fading out the text content inside. – Vinay Sharma Jul 18 '20 at 11:23 — Vinay Sharma, Jul 18 '20 at 11:23

CSS fade out left and right edges of div and content

1 Answers1

Linked