In this blog, we will learn how to add a gradient background overlay to the background Image. This is a simple CSS trick that you can apply to the background image of the website banner. For better understanding, follow the video tutorial below. We have got many videos on front-end development on our youtube channel. If you like our content you can subscribe to our channel.
I hope you have watched the video tutorial. Every website has a homepage. Since the main entry path of a website is the homepage, it needs to be well-served to the user to create a good impression. Some people add text animation, particle animation, or a background video to the home page to make it more attractive. These techniques include gradient overlays which are also a beautiful way to attract users.
Now, what are CSS Gradients? CSS gradients allow us to display smooth transitions between many colors. You can also add them on top of the background image of your website banner. If you combine the background-image URL and CSS gradient properties, you'll be able to do that.
You can create a semi-transparent color gradient or semi-opaque color gradient on top of a background image by using a CSS pseudo selector called after. Yet, the smartest and easiest way to do that is to add a couple of parameters to the background-image property. We have to use linear-gradient property here. The first parameter inside the linear gradient is the direction. it means in which direction you want to create the gradient. In our case, we took 'to bottom'. Then come the colors. You can use many colors here. In this case, we wanted to keep the upper part transparent and the lower part black. The percentage used here is for the proportion of the colors.
You may like this:
How to add Gradient background Overlay [ Source Code ]:
After creating HTML and CSS files, link the external CSS file to HTML. Copy and paste the following code into your project. Try experimenting with using many colors as gradients to see how it looks.
ADD HTML:
ADD CSS:
Hope you understand the code and implemented it. If you like this simple CSS trick then you can visit the rest of the posts on our website. Thank you very much for visiting our website.
Post a Comment
Please Do not Enter any spam link in the comment box