Как наложить градиент на картинку с помощью css

Подсмотрела следующее решение:

<div class="blog-card__image">
 <a href="<?php echo get_permalink(); ?>">
 <img loading="lazy" src="<?php echo $image_url; ?>" alt="post image"></a>
  <div class="blog-card__date">
   <?php echo get_the_date(); ?>
  </div>
</div>

Мой код, где blog-card__image — внешний блок с картинкой внутри.

blog-card__date — блок вывода даты, которая лежит поверх картинки внизу и должна быть видна на любом изображении, для этого и нужен градиент с прозрачного на черный, переходящий вниз.

Код css:

.blog-card__image {
  height: 234px;
  position: relative;
}
.blog-card__image::before {
  content: "";
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}
.blog-card__date {
  position: absolute;
  bottom: 5px;
  left: 30px;
  z-index: 20;
}