Sometimes we want to add the effect of a nice color into our page images. The CSS gradients can help to do it.
If you didn't work before with gradients, no problem, I will give a quick overview of it.
The CSS gradient helps us to define smooth transitions between 2 o more colors with directions.
radial-gradient we create gradients.
The following markup will help us to play with the CSS gradient.
linear-gradient and radius-gradient
Into the div, we set the
background-image with thelinear-gradiant` function. It requires at least two colors as parameters, and by default, the direction is top to bottom.
To change the directions, add extra parameters like
to top or
to left corner ,
to right top.
Also, we can mix up more than two colors,
background-image: radial-gradient(red, yellow, green);
Another gradient is radius-gradient but the radius effect.
How to use a gradient with images.
The gradient color effect works over images. Instead, use background-image. We will add it to the background property.
First, set the image path into the
url function, only to show the image a bit nice add
center / cover to fit with the container.
background: url("[https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D)")no-repeat center / cover`
Before the url image, use the linear-gradient function and set 2 colors using
rgba() function for the opacity.
The rgba helps to define colors using the Red-green-blue-alpha and alpha channel, which specifies the color's opacity.
For example set the red to 255 and the alpha to 0.3 and we get the following effect.
background: linear-gradient(rgba(255,0,0,0.3),rgba(255,0,0,0.4)), ...
Other example with the blue.
background: linear-gradient(rgba(0,0,255,0.3),rgba(0,0,255,0.4)), ...
#Final We are done with the quick overview with gradients in CS; you can play with it and build significant image effects in css like my last example.
Did you find this article valuable?
Support Dany Paredes by becoming a sponsor. Any amount is appreciated!