Backdrop Filter

要素裏の領域にフィルターをかけるCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO
opacity
blur
brightness
grayscale
sepia
contrast
shadow
rotate
invert
saturate

使い方

opacityやshadowは複数使用時に適用されるフィルター。

  • CSS
.bdf-opacity    {backdrop-filter: opacity(50%);}
.bdf-blur       {backdrop-filter: blur(10px);}
.bdf-brightness {backdrop-filter: brightness(50%);}
.bdf-grayscale  {backdrop-filter: grayscale(100%);}
.bdf-sepia      {backdrop-filter: sepia(100%);}
.bdf-contrast   {backdrop-filter: contrast(20%);}
.bdf-shadow     {backdrop-filter: drop-shadow(4px 4px 10px blue);}
.bdf-rotate     {backdrop-filter: hue-rotate(120deg);}
.bdf-invert     {backdrop-filter: invert(100%);}
.bdf-saturate   {backdrop-filter: saturate(20%);}