0

I saw a wesite with a neat simple gradient and a partially oscured image, how can I acheive this with CSS?I guess with an absolute overlay with a radial but I'm not very good with gradient... is this masking maybe? or pure CSS?

The effect: https://i.stack.imgur.com/e2uk4.png

<div style="position:relative; width:100%; height:600px; background-image:url('/background-image.jpg');>
    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px;></div>
</div>
gabogabans
  • 3,035
  • 5
  • 33
  • 81

1 Answers1

2

Multiple background can approximate this:

html {
  min-height:100%;
  background:
    radial-gradient(60% 110% at top right,transparent 80%,red ),
    url(https://picsum.photos/id/1016/800/800) center/cover;
}

It can also be masking too:

.box {
  height:100vh;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  -webkit-mask:radial-gradient(60% 110% at top right,white 80%,transparent);
}

body {
 margin:0;
 background:red;
}
<div class="box"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I think this question is a duplicate https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element or https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image your answer confirm the duplicate – doğukan Aug 20 '20 at 00:45
  • @dgknca then vote to close as duplicate, you have the privilege to do so ;) – Temani Afif Aug 20 '20 at 00:50
  • 1
    I just a little surprised. okay ;) – doğukan Aug 20 '20 at 00:55