[css] mix-blend-mode

취미로 그림 그리기나 포토샵 좀 해봤던 사람들은 mix-blend-mode가 익숙할 것 같다.

오버레이, 곱하기 등의 효과를 그냥 코드로 옮긴것과 같음

 

페이지가 너무 휑해보여서 배경 채우려고 그라데이션을 좀 넣었는데 저 박스와 만나는 부분이 어색하게 느껴졌다.

opacity를 조절하거나 rgba를 조절하는 방식은 색상 자체를 더 어둡게 만들어야해서 번거롭겠다는 생각이 들었다.

그래서 생각난게 mix-blend-mode인데 다행히 익숙한 효과들 거의 다 있었음..

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

이런 효과들이 있고 soft-light 하면 겹치는 부분이 말그대로 색이 부드럽게 섞인다.

박스에 적용해주자.

const InfoBox = styled.div`
  flex: 1;
  position: relative;
  margin-right: 20px;
  padding: 20px 25px; 
  background: #f9f9fb;
  border-radius: 1rem;
  mix-blend-mode: soft-light; // ✔✔
`;

 

적용해주면 이렇게된다. 약간 불투명유리처럼 됨

근데!

텍스트까지 같이 반투명해지는게 싫으면 의사클래스를 활용할 수 있음

const InfoBox = styled.div`
  flex: 1;
  position: relative;
  margin-right: 20px;
  padding: 20px 25px;
  background: transparent;
  border-radius: 1rem;
  box-shadow: 1px 1px 0.5px -5px rgba(0, 0, 0, 0.05),
    1.8px 1.8px 1.8px -5px rgba(0, 0, 0, 0.03),
    2.9px 2.8px 4.4px -5px rgba(0, 0, 0, 0.022),
    5.2px 5.1px 9.4px -5px rgba(0, 0, 0, 0.018),
    12.5px 12.2px 19.3px -5px rgba(0, 0, 0, 0.015),
    48px 47px 47px -5px rgba(0, 0, 0, 0.012);
  height: 200px;

  &::before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #f9f9fb;
    mix-blend-mode: soft-light;
    border-radius: 1rem;
    z-index: -1;
  }
`;

 

이렇게 하면 텍스트는 선명하게 나온다.

 

opacity를 건드리지 않고 효과를 줄 수 있고, 교차되는 부분이 더 어두워지거나 밝아지는 그런 효과도 줄 수 있어서 좋다.

요즘은 예쁜 페이지가 만들고싶어서 css랑 프레이머모션 뒤적이는중

그리고 저렇게 불규칙하게 섞인 그라데이션 효과는 mesh gradient라고 하더라 막 움직이고 더 동적인 효과도 내고싶다