Search code examples
javascriptcsslinear-gradients

create linear-gradient background from image colors

Using Javascript/CSS, I'd like to create linear-background gradients using an image's colors like Youtube is doing in its latest releases (It can be clearly seen when playing any video with bright colors).

The objective is to have a <div> with the background: linear-gradient ... property, and an <img> inside of it. The linear gradient (a radial one) must use the image color palette.

How can I "extract" colors from the image to populate the linear background property?

Solution

  • There are many ways to solve this problem. I add one below.

    -html

        <div class="background">
      <img class="gradient" src="./pic.jpg" />
      <img class="thumb" src="./pic.jpg" />
    </div>

    -css

      .background {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gradient {
    position: absolute;
    height: 60px;
    width: 60px;
    filter: blur(5px);
  }
  .thumb {
    height: 30px;
    width: 30px;
    position: relative;
    border-radius: 4px;
  }

    -result

    enter image description here

    I'm sorry but your question is difficult to understand.

    linear gradient has 2 colors at least.(start,end)

    But usually, any picture has lots of colors like your avatar.

    So, I think using blur is more convenient.

    I hope my answer to help you.

    Oh, to control the gradient background, please change blur pixels in your mind.

    Good luck.