How to create a fade effect with CSS on background with an image on top of it?

I'm trying to replicate the image slider on https://www.masterclass.com/

enter image description here

  • 2
    Check out this question on stackoverflow Can you overlay a transparent css3 gradient over a background image? – AndrewH Jun 12 '17 at 22:52
  • 1
    You got any reason not to use a png overlay, just like they are using in that website? The top gradient is a css gradient though.. – Joonas Jun 13 '17 at 8:04
  • I realize now that I didn't read the question that well and you actually don't specifically ask for css only solutions. In that website they have the slider image as a background image and in that same element they use :before pseudo element to apply the png gradient as a BG image on top of the actual image. – Joonas Jun 13 '17 at 12:47

To create that look you can set the image as the background of a div and then create a "black to clear to black" gradient in the div so it appears on top of the image.

background-image: url('../images/Ramsey.jpg');


background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#020202',GradientType=1 ); /* IE6-9 */

I found this gradient code from one of the many gradient generators: http://www.colorzilla.com/gradient-editor/

with these settings: enter image description here


You can actually chain backgrounds in CSS, separated by a comma. First one is the lowest, second one is on top of that, et. So all you need to do is set the image first and then the gradient.

You can even use blend modes in modern browsers to ensure a nice blending effect on the image.

I'll leave it up to you to generate the required browser prefixes (the generator linked in the other answer is a very good one for that).

  background: url('https://placeimg.com/500/500/nature') 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
  background-blend-mode: multiply;

JSfiddle proof: https://jsfiddle.net/synu8xk1/2/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.