CSS Shadow on image-CodePudding

https://i.stack.imgur.com/Qc846.png

I need to figure how I can do something like this in css

I tried to use backdrop filter, inset shadow but it didn't work , any help?

CodePudding user response：

Use linear-gradient() as a background-image to apply an overlay over an image:

div {
  background-image:
    linear-gradient(to right, #111 40%, transparent 80%), /* This is the overlay, adjust as needed. */
    url(https://picsum.photos/400/200);
  width: 400px;
  height: 200px;
}

<div></div>

CodePudding user response：

If you'd like to reuse the gradient, bind it to a separate class-name and it's pseudo-element. E.g.:

.with-gradient:after 
  { 
    position: absolute; 
    inset:0;
    content: ' ';
    display: block;
    background: linear-gradient(to right, #111 40%, transparent 80%)
  }

CodePudding user response：

You can use one of the two ways to get a shadow effect.

<style>
        /* *{
            background:  rgba(0,0,0,0.7)url('architecture.jpg'); 
            background-size: cover; 
            background-blend-mode:darken;
        } */

          /*  OR  */
          
        .bg{
            background-image:linear-gradient(to right, rgba(17, 17, 17, 0.925) 40%, transparent 80%),url(architecture.jpg);
            width: 98%;
            height: 600px;
            }   
    
    </style>