Размытое пятно CSS

Пример

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  padding: 2em; 
  font-family: sans-serif; 
  background: #0B0B0B; 
} 
 
h1 { 
  display: inline-block; 
  vertical-align: top; 
  color: #00E676; 
  position: relative; 
} 
 
h1:before, 
h1:after { 
  content: ''; 
  position: absolute; 
  top: 40px; 
  left: 0; 
  width: 100%; 
  height: 8px; 
  background: #00E676; 
} 
 
h1:after { 
  top: 60px; 
  height: 16px; 
  opacity: .1; 
  filter: blur(8px); 
}

<h1>Ausweis</h1>

Функция blur() задаёт размытие по Гауссу изображений, фоновых картинок или текста. К элементу напрямую применить размытие нельзя, только к его потомкам.

Синтаксис:

filter: blur(<размер>);

Значения:

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px). Чем больше значение, тем сильнее будет размыто изображение.

Отрицательное значение не допускается. Пустое значение воспринимается как 0px.

=====================================================================

Для достижения различных эффектов с тенями, также можно использовать:

box-shadow он добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже.
Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками.
Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис:

box-shadow: none | <тень> [,<тень>]*

Значения:

none inset <сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>