[css] gradient, backdrop-filter

suyeon kim·2024년 5월 8일

gradient

.banner--fadeTop {
  background: linear-gradient(
    to bottom,
    #000, 
    transparent
  );
  height: 7.4rem;
}
.banner--fadeBottom {
    height: 7.4rem;
    background-image: linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.9),
      #000
    );
  }

filter, backdrop-filter

filter = 자기자신에게 블러처리 하는 것 ex. filter : blur(10%);

backdrop-filter = 해당요소의 백그라운에 블러처리 하는 것

-webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);


0개의 댓글