Image Right Edge Fade/Blur CSS

Question

I have a simple CSS related question. How do I obtain the right end blur/fade as shown in the image?

enter image description here

`-webkit-mask-image`, but works only in Chrome – rafaeldefazio Jan 27 '15 at 23:18 — rafaeldefazio, Jan 27 '15 at 23:18

misterManSam · Accepted Answer · 2021-11-28T00:55:47.460

Two methods

Let's make this:

1. Using box-shadow

Browser Compatibility: IE 9 + for box-shadow.

Place appropriate box-shadow inset in the div
The div is given left padding to line it's text up with the white part of the background (the box-sizing: border-box essentially absorbs the padding into the width)

Box-shadow example

div {
  background: url(https://i.stack.imgur.com/AF4np.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 300px;
  box-sizing: border-box;
  box-shadow: inset -350px 0 100px 0 #FFF;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

2. Using multiple background images with a linear-gradient

Browser Compatibility: IE 9 + for multiple background images / IE 10 + for CSS linear gradients (IE 9 can be supported with an IE gradient filter or a partially transparent .png)

The container div is given a linear-gradient background followed by the image background (separated by a comma)
The div is given left padding to line it's text up with the white part of the background (the box-sizing: border-box essentially absorbs the padding into the width)

Gradient example

div {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 240px, rgba(255, 255, 255, 1) 290px), url(https://i.stack.imgur.com/AF4np.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 250px;
  box-sizing: border-box;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

no longer works, the picture shows in front of the fade efect (chrome, edge) — Egon Stetmann., Nov 27 '21 at 01:07
@EgonStetmann. They both look fine to me? I fixed the broken CSS background images in my examples; maybe that was causing confusion. — misterManSam, Nov 28 '21 at 00:46
oh, and for the gradient example you need to make sure the image is placed second in the background value. The first background (in this case the gradient) in the value will overlap the second (in this case the image), the second would then overlap a third background, etc. — misterManSam, Nov 28 '21 at 01:02

score 2 · Answer 2 · answered Jan 27 '15 at 23:12

Use a CSS gradient that goes from completely transparent to white and position it over the RHS of the image.

background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

Check which vendor prefixes apply to your target platforms.