Skip to content

DEV Community

Alex Carpenter

Posted on Mar 16, 2020

How to add gradient overlays to images with CSS

#css

Learn how to add a gradient overlay to your images to create a nice modern effect.

View the demo code https://codepen.io/alexcarpenter/pen/RwPyoyE

Top comments (0)

Subscribe

Read next

Relative Grade Calculator

AbuBakar Shabbir - Sep 17

Mastering CSS BEM naming with Practical Examples: Pure HTML, Angular, and Next.js

Ahmet Erkan Paşahan - Sep 17

How to Truncate Strings Easily with CSS

This Dot Media - Sep 17

The Solar System in CSS

Mads Stoumann - Aug 25

I am a self taught developer that works best when floating in between design and engineering teams. I enjoy sharing what I know via short instructional screencasts and the occasional written post.

Location

Grand Rapids, MI
Work

UI Engineer
Joined

Dec 13, 2017

How to use the object-fit CSS property to scale images responsively

How to create skewed backgrounds with CSS

How to create vertical text with CSS