# Gradient Overlay on an Image

**URL:** <https://community.hubspot.com/t/gradient-overlay-on-an-image/12182>\
**Category:** CMS Development\
**Created:** [January 4, 2019, 3:21pm UTC](https://community.hubspot.com/t/gradient-overlay-on-an-image/12182 "2019-01-04T15:21:40Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![JasonRosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jasonrosa/32/56551_2.png) [@JasonRosa](https://community.hubspot.com/u/JasonRosa)\
**Post date:** [January 7, 2019, 6:52pm UTC](https://community.hubspot.com/t/gradient-overlay-on-an-image/12182/4 "2019-01-07T18:52:12Z")

</div>

@LevyRecognition if you look at the first section of CSS where the gradient was see through, you’ll see a fourth number within the parentheses after rgba. This last number is what determines the opacity with 0 being completely transparent and 1 being not transparent at all.

Therefore you’d want to add a comma after the last number in your rbga colors of the gradients and add the opacity that you want. I’d recommend trying 0.5 to start and tinkering around from there. Here [is a resource on rgba as a reference](https://css-tricks.com/the-power-of-rgba/).

---

_[View the full topic](https://community.hubspot.com/t/gradient-overlay-on-an-image/12182)._