Can I add a black shadow gradient on top of a background hero video in Webflow?

Published on
September 22, 2023

Yes, you can add a black shadow gradient on top of a background hero video in Webflow by following these steps:

  1. Select the section or div block that contains the video element.
  2. In the Styles panel on the right side of the Webflow Editor, click on the Background dropdown menu.
  3. Choose the Video option.
  4. Upload or select the video that you want to use as the background.
  5. Once the video is selected, you will see options to customize the video playback settings, such as loop, autoplay, and mute. Make the necessary adjustments to fit your requirements.
  6. To add the black shadow gradient overlay, you will need to create an additional layer. You can do this by adding a div block inside the section or div block that contains the video element.
  7. With the newly created div block selected, go to the Styles panel and adjust its position to cover the entire section or div block. You can do this by setting the div block's position to absolute and then adjusting the top, right, bottom, and left values to 0.
  8. Next, set the div block's background color to black. You can do this by selecting the div block and clicking on the Background color square in the Styles panel. Choose the black color option.
  9. To create the shadow gradient effect, you will need to add a CSS gradient. In the Background color dropdown menu, choose the Custom option.
  10. A color picker will appear. Click on the Add gradient button.
  11. In the gradient editor, make sure the first color stop is set to black (or any other dark color you prefer). Adjust the color stops and position sliders to achieve the desired gradient effect. You can also add more color stops if needed.
  12. Click on the Close button to confirm the gradient settings.

By following these steps, you can add a black shadow gradient overlay on top of a background hero video in Webflow.

Additional Questions:

  1. How can I customize the playback settings of a background video in Webflow?
  2. Is it possible to add multiple gradient color stops in Webflow?
  3. Can I adjust the opacity of the black shadow gradient overlay in Webflow?