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, 2017 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, 2017 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, 2017 at 12:47

2 Answers 2


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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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