How to half darken an image using gradient CSS?

Question

I need to darken half of a given image. I know that here can be used gradient in CSS, but I don't know how to use it appropriately.

Here's HTML code:

<div>
  <img class="another_image" src="img/file1.jpg" alt="file1">
</div>

Here's CSS code:

.another_image{
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;]
}

Here's how is should be:

Here is what I have now

score 3 · Accepted Answer · answered Nov 22 '19 at 17:51

3

You can apply a gradient to the background image

.grad {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%), url('http://placekitten.com/300/300') no-repeat;
}

<div class="grad">
</div>

<img src="http://placekitten.com/300/300" />

answered Nov 22 '19 at 17:51

epascarello

204,599
20
195
236

you can simplify the gradient to `linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%)` [bottom direction is the default one] – Temani Afif Nov 22 '19 at 19:37

score 3 · Answer 2 · answered Nov 22 '19 at 17:52

You can use an ::after pseudo element on the container with the background gradient. Here is a fiddle https://jsfiddle.net/qcw6u7ze/1/

<div class="imgWrap">
    <img src="https://placehold.it/350x200">
</div>

.imgWrap {
    position: relative;
    display: inline-block;
}

.imgWrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 
   100%);
}

score 1 · Answer 3 · answered Nov 22 '19 at 18:01

check out this question: How do I combine a background-image and CSS3 gradient on the same element?

This should help:

body {
  height: 500px;
  background: linear-gradient(
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(https://www.vegetables.co.nz/assets/Uploads/vegetables.jpg);
}

Note, the height property is required.

https://jsfiddle.net/z1kygnb6/

score 0 · Answer 4 · answered Nov 22 '19 at 18:12

You can set the linear-gradient as shown below:

.another_image{
 height: 500px;
 width:500px;
  background: linear-gradient(
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(https://media.istockphoto.com/photos/pink-rose-flowers-arrangement-picture-id669412596?k=6&m=669412596&s=612x612&w=0&h=iG7UFMq3Yt6MAnim1jCVrvG0LsmZLstFozUWzYejh4g=);
}

working solution

How to half darken an image using gradient CSS?

4 Answers4