Creating Gradient on Cover Blocks (background)

• 

  francisdjasmin · Member · Aug 25, 2023 at 6:01 pm

  • Copy link
  • Add topic to favorites

  i everyone,

  I’m having an issue. I’ve just started to learn WordPress block editor and CSS.

  I would like to have a fading background with a text over (see picture).

  To do so, I’ve write some CSS code that I’ve put on the “Cover” Block.

  But as you can see, my paragrapg (text) is fading with the background. I would like to exclude the text from the fade for it to be visible, fully black or white.

  Is that possible ?

  Thank you, Francis.

  CSS I’ve used :

  .background {
  -webkit-mask-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(rgba(0, 0, 0, 1)),
  to(rgba(0, 0, 0, 0))
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }