Component page

Community feedback

• 

  Abby Nyakara•190

  @AbbyNyakaraPosted almost 3 years ago

  use the css filter property to add the opacity. This was how i did mine

  img{ filter: opacity(35%) drop-shadow(0 0 hsl(277, 64%, 61%)); }

  Marked as helpful

  1

  ---

  

  Solomon Yahwin•40

  @Auto-YahwinPosted almost 3 years ago

  @AbigaelN2021 thanks for the response. I haven't used drop-shadow before. I'll look it up to fully understand, then apply it to my project.

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Solomon,

  • you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approach
  • you also need to explore background-blend-mode. (multiply usually does the trick)

  Good luck!

  Marked as helpful

  0

  ---

  

  Solomon Yahwin•40

  @Auto-YahwinPosted almost 3 years ago

  @darryncodes, is there any way I can reduce the opacity of the color assuming am using the first approach (I.e the linear-gradient method)?

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  I think your best bet @Auto-Yahwin would be to use filter. You can create a lot of affects with background-blend-mode too.

  0