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