Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

How to use CSS Gradients to create images effects.

How to use CSS Gradients to create images effects.

Create amazing image effects

Dany Paredes's photo
Dany Paredes
·Dec 24, 2020·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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.

Did you find this article valuable?

Support Dany Paredes by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this