Sometimes we want to add a nice colors effect 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.
Into the div we set the
background-image with the
linear-gradiant function. It requires at least 2 minimum 2 colors as parameters and by default the direction is top to bottom.
To change the directions, add before extra parameters like
to top or
to left corner ,
to right top.
Also, we can mix up more than 2 colors,
background-image: radial-gradient(red, yellow, green);
Another gradient is radius-gradient but the radius effect.
The gradient effect can be applied over images, instead use background-image, we will add it into the background property.
First set the image path into the
url function, only for show the image a bit nice add
center / cover to fit with 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 defines colors using the Red-green-blue-alpha and alpha channel specifies the opacity of the color.
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)), ...
This is a quick overview with gradients in CSS, you can play with it and build great image effect in css like my last example.