<div class="elem">
  <p>Hello, I'm a div with a wrapped shadow effect. Thanks for pseudo elements!</p>
</div>
body {
  background: lightgrey;
  font-family: 'Rubik';
  line-height: 1.35;
  padding: 1rem;
}

.elem {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  background: #fff;
  padding: 2rem 1rem;
  font-size: 1.5rem;
  margin: 2rem auto;
  text-align: center;
  box-sizing: border-box;
  
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 50%;
    height: 100%;
    z-index: -1;
    transform: skewY(-2deg);
  }
  
  &:after {
    content: "";
    position: absolute;
    right: 0;
    top: 4px;
    width: 50%;
    height: 100%;
    z-index: -1;
    transform: skewY(2deg);
    
  }
  
  &:before,
  &:after {
    background: linear-gradient(to bottom, transparent, #000);
    background: #000;
    filter: blur(3px);
    opacity: 0.3;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.