Как сделать тень при наведении css

<div class="box-with-shadow">
  У этого элемента будет тень
</div>

.box-with-shadow {
  /* Ширина блока */
  width: 250px;
  /* Внутренние отступы */
  padding: 32px;
  /* Цвет фона в элементе */
  background-color: #38d9a9;
  /* Сделаем видимую границу элементу */
  border: 1px solid #333;
}

.box-with-shadow:hover {
  /* Свойство отвечающее за формирование тени 
   8px - отступ по оси Х
   10px - отступ по оси Y
   5px - радиус размытия тения
   2px - радиус распространения
   rgba - функция формирующая цвет тени
  */
  box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2);
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  transition: box-shadow 0.3s; /* Добавим плавный переход */
}

.box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Горизонтальное смещение, вертикальное смещение, размытие и цвет*/
}