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.
In the background-image or background, using linear-gradient or 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 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 right, to left, 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.
Use gradient with images.
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 no-repeat and 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)), ...
That's it!
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.
Top comments (0)