css Gradients

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @cwasi, congratulations for your new solution!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 1110px will not grow or shrink because the size will be ever the same, but a container with max-width: 1110px or min-width: 1110px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  You can use mix-blend-mode to make this color blend between the image and the background-color of the container.

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  0