How to darken an image?

Hello everyone, when I import a picture from figma, I have it light and I need it as dark in figma, here is an example of what I have

and here is what i need

1 Like

Most image editing software will have tools to alter the brightness levels of an image.
Even if you don’t have access to anything like Photoshop, there are Open Source alternatives like Gimp.
It can be done in CSS without altering the original image using filters. Though it would be less code to change the image.

1 Like

With filters, I didn’t manage to get the desired result, but with Photoshop, it’s not clear how to do anything.

As Sam said you can easily do this with filters.

What is it you need that’s different?


From the image menu, look in Adjustments, in there you can use Brightness/Contrast or Levels.

1 Like

I solved it like this

    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 10);
    max-width: 100%;
    background-image: url('../img/57 34166.png') ;
    background-repeat: no-repeat;
    background-size: cover;
    height: 184px;


You can use filter and change the brightness saturation gray scale etc according to your need

  1. Open your Figma project and select the image you want to darken.
  2. Find the properties of the selected image. Locate the “Effects” Section.
  3. Click on the “+” button.
  4. From the drop-down menu select “Color”.
  5. Choose a dark color by making a color picker.
  6. Moving the slider to the left will make the image darker.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.