JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="test"></div>

CSS

#test {
  width: 200px;
  height: 200px;
  background: black;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  position: relative;
  filter: blur(15px);
}

#test:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: white;
  clip-path: inherit;
}