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.

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 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 right, to left, 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.

$[codepen.io/danywalls/pen/VwMwEJP]

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 no-repeat and 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.