Fading content inside border II

fading-content-inside-border-ii.markdown

Fading content inside border II

Using CSS mask to create a fading content inside border

alternative version without mask-composite: https://codepen.io/t_afif/pen/YzObqzg

A Pen by newmedia2 on CodePen.

License.

index.html

<ul>
  <li>Cookie chocolate bar </li>
  <li>Jelly-o macaroon jelly</li>
  <li>Toffee chocolate topping</li>
  <li>Chocolate cheesecake maca</li>
  <li>Apple pie sesame snaps</li>
  <li>Chocolate bar macaroon</li>
  <li>Cake cake jelly beans</li>
  <li>Snaps bonbon pie gummies</li>
</ul>

style.css

ul {
  border: 4px solid orange;
  /*border-radius: 20px; it works with radius as well */
  -webkit-mask:
    linear-gradient(#000 0 0), 
    /* fade only the padding area 
       (in the opposite direction) */
    linear-gradient(#0000,#000 90%) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
}



body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: linear-gradient(45deg,#0b4c80,#82167a);
}

ul {
  font-size: 2rem;
  font-weight: bold;
  font-family: sans-serif;
  color: #fff;
  padding: 2rem 1rem;
  list-style-position: inside;
}