MENU


Imaging

[backdrop-]filter ('backdrop'adjusts the colors/outlook behind the (semi-)transparent part).
Note that this CSS property is applicable to <video> elements too.
: none
: url(commonfilters.svg#filter)
: blur(2px)
: brightness(60%)
: contrast(40%)
: drop-shadow(4px 4px 10px blue)
: grayscale(30%)
: hue-rotate(120deg)
: invert(70%)
: opacity(20%)
: sepia(90%)
: saturate(80%)
: hue-rotate(120deg) sepia(5%)


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body{
      background: no-repeat center / cover url('/shared/cow.jpg');
      width: 100vw;
      height: 100vh;
   }
   div{
      background: transparent;
      backdrop-filter: hue-rotate(320deg) saturate(0%) blur(20px);
      width:800px;
      height:500px;
   }
</style></head><body>
   <div></div>
</body></html>

mix-blend-mode (blending the content with the background and parent)
: normal
: multiply
: screen
: overlay
: darken
: lighten
: color-dodge
: color-burn
: hard-light
: soft-light
: difference
: exclusion
: hue
: saturation
: color
: luminosity

image-rendering
: crisp-edges: when scaling up, preserves edges and contrast without smoothing and blurring.
: pixelated: when scaling up, use the nearest-neighbor algorithm so to appear in large pixels.
: auto: let the browser/user agent decide on the image-scaling-up algorithm.

color-adjust
: economy: optimizes the output prudently. (default)
: exact: the user agent may not change the output.