JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Minou
</div>

CSS

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

body, div {
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  color: #fff;
  font: 100 18px 'Segoe UI', sans-serif;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle stroke-dasharray='40 5' stroke-width='3' stroke='white' fill='none' cx='50' cy='50' r='50'/%3E%3C/svg%3E"), linear-gradient(45deg, aqua, magenta);
}

div::before {
  --blur: 5px;

  content: "";
  position: absolute;
  width: calc(100% + var(--blur));
  height: calc(100% + var(--blur));
  border-radius: inherit;
  background: inherit;
  filter: blur(var(--blur));
  z-index: -1;
}