Стильные тени средствами CSS

.box {
  /* Required properties */
  position: relative;
  background: white;

  /* Use  your own styles here */
  margin: 45px;
  width: 250px;
  height: 123px;
}

/*
* This is what creates the shadow.
*/
.box:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top left, #ff3d00 0%, #0400ff 100%);
  transform: translate3d(0px, 20px, 0) scale(0.95);
  filter: blur(20px);
  opacity: var(0.7);
  transition: opacity 0.3s;
}

/*
* Prevents issues when the parent creates a
* stacking context. (For example, using the transform
* property )
*/
.box::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
}

/* Custom styles for the demo */
body {
  text-align: center;
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu,
    Cantarell, "Noto Sans", sans-serif;
  font-weight: bold;
  font-size: 1.8em;

}
.box {
  display: flex;
  justify-content: center;
  flex-direction: column;
}