pointer-events

https://webref.ru/css/pointer-events

by akogch

HTML

<div class="panel">
  В соответствии с законом больших чисел, дифференциальное исчисление
  непосредственно отображает положительный полином. Умножение двух векторов
  (векторное), общеизвестно, концентрирует возрастающий вектор.
</div>
<div class="panel">
  Абсолютная погрешность последовательно оправдывает лист Мёбиуса, что
  несомненно приведет нас к истине. Если предположить, что a &lt; b, то
  многочлен последовательно трансформирует нормальный ортогональный
  определитель.
</div>

CSS

.panel {
  background: #50a2de;
  /* Цвет фона */
  color: #fff;
  /* Цвет текста */
  padding: 1em;
  /* Поля вокруг текста */
  width: 16em;
  /* Ширина */
  height: 7em;
  /* Высота */
  border-radius: 10px;
  /* Радиус уголков */
  position: relative;
  /* Относительное позиционирование */
  display: inline-block;
  /* Располагаем блоки рядом */
  margin-right: 2em;
  /* Отступ справа */
  overflow: hidden;
  /* Скрываем всё, что выходит за пределы блока */
}

.panel::before {
  content: "";
  /* Выводим пустой блок */
  position: absolute;
  /* Абсолютное позиционирование */
  left: 10px;
  right: 10px;
  /* Устанавливает ширину блока */
  bottom: 0;
  /* Положение от нижнего края */
  height: 4em;
  /* Высота */
  background: linear-gradient(to bottom, transparent, #50a2de 90%);
  pointer-events: none;
  /* Не реагирует на мышь */
}