CSS Filter

  • Filter: blur, brightness, grayscale, invert, opacity
  • Backdrop-filter: Giống với Filter nhưng chỉ apply cho background.

Filter

  • blur
    • Làm mờ
    • filter: blur(0.2em)
  • brightness
    • Tăng/ Giảm độ sáng của 1 phần tử
    • filter: brightness(80%)
  • contrast
    • Set độ tương phản của element, tăng - giảm
    • filter: contrast(160%);
  • grayscale
    • Tăng độ xám
    • filter: grayscale(80%)
  • invert
    • Đảo ngược màu sắc của phần tử. Từ bảng màu sáng sang tối và ngược lại.
    • filter: invert(1);
  • opacity
    • Độ trong suốt
    • filter: opacity(0.3)
  • saturate
    • Độ bão hòa của màu sắc
    • filter: saturate(155%);
  • sepia
    • Tông màu nâu đỏ
  • hue rotate
    • Shift hue colors
    • filter: hue-rotate(120deg)
  • drop-shadow
  • url
    • apply an SVG filter from a linked SVG element or file.
    • filter: url(#pink-filter)
  • backdrop-filter
    • Giống như filter, nhưng chỉ apply cho background