blurred edge box

by JakobJingleheimer

HTML

<div class="panel">
  <p class="marquee">Dreamcatcher organic bitters pork belly retro actually. Meggings offal art party, ugh kinfolk next level cardigan. Pug hashtag pitchfork yuccie.</p>
  <p class="marquee">Meh blog thundercats disrupt williamsburg. Kickstarter cronut artisan, listicle fap direct trade viral irony drinking vinegar tousled umami hammock letterpress mumblecore pour-over.</p>
</div>

CSS

.panel {
  color: white;
  padding: 2rem;
  position: relative;
}

.panel::after {
  width: 3rem;
}

.panel::before {
  left: 0;
}

.panel::before,
.panel::after {
  background: 
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  bottom: 0;
  content: '';
  opacity: 0.8;
  position: absolute;
  right: 0;
  top: 0;
}

.marquee {
  height: 1rem;
  line-height: 1rem;
}