How to fade the edge of a div with just CSS? [duplicate]

by

You could overlap a pseudoelement with a gradient applied on it

ol {
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  position: relative;
}

ol:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
  width: 100%;
  height: 4em;
}
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>

Since pointer-events is set to none the text under the gradient will be also selectable/clickable.

Update 03.2023

The same effect can be achieved with the mask property

ol {
  --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  -webkit-mask: var(--mask); 
  mask: var(--mask);
  
}
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>

More Related Contents:

  1. CSS transform doesn’t work on inline elements
  2. Can a CSS class inherit one or more other classes?
  3. How to override !important?
  4. How to skew element but keep text normal (unskewed)
  5. MVC4 StyleBundle not resolving images
  6. Does height and width not apply to span?
  7. Can I target a :before or :after pseudo-element with a sibling combinator?
  8. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  9. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  10. Are unused CSS images downloaded?
  11. Background-image in keyframe does not display in Firefox or Internet Explorer
  12. @import vs link
  13. Dynamic Sass Variables
  14. How can I ensure that text is inside rounded div?
  15. Font-size issues comparing chrome and Firefox
  16. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  17. How to display 3 items per row in flexbox?
  18. Dynamic styleUrls in angular 2?
  19. Are CSS selectors case-sensitive?
  20. SASS indented syntax on multiple lines?
  21. Applying “page-break-before” to a table row (tr)
  22. Is there a way to apply styles to Safari only?
  23. Placeholder Mixin SCSS/CSS
  24. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  25. position:relative leaves an empty space
  26. Setting different lengths for grid gaps in CSS Grid
  27. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  28. chrome : how to turn off user agent stylesheet settings?
  29. How can I delay the start of a CSS animation?
  30. grid-area does not seem to work with the attr function, is this by design?

Leave a Comment