
Chrome browser is usually better at rendering CSS backdrop filters than any other browser.
That's not the case with one of the filters - **blur()**.

Chrome fails under multiple scenarios:

- unpleasant flickering, when content under the backdrop is moving,
  or when the backdrop moves beyond the viewport,
- the **backdrop-filter: blur()** completely breaks
  when you try to animate it with **transition** or **animation**.

I've found a remedy for the second scenario. And the use case for
transitioning the **backdrop-filter: blur()** is quite common -
the blur overlay is often displayed behind a modal window and
now we'll be able to make a smooth transition between the two states.

To see this effect in action, hover or tap the box below.

<BackdropBlurDemo.BackdropBlurOverlayDemo />

## The solution

I've discovered that while transitioning the **backdrop-filter: blur()** property
breaks the transition in Chrome, we can transition the blur in a different way.
Here's where [**@property**](https://developer.mozilla.org/en-US/docs/Web/CSS/@property)
comes to rescue - we can use it to define a custom CSS property and transition it instead.

Now the problem is Firefox does NOT support **@property**, but we'll make a fallback for it!

```css
.blur-overlay {
  --end-blur: 20px;
  --duration: 0.3s;
  --easing: ease-in-out;
  position: fixed;
  inset: 0;
}
@supports (-moz-appearance: none) {
  .blur-overlay {
    transition: var(--duration) backdrop-filter var(--easing);
  }
  .blur-overlay[data-state="open"] {
    backdrop-filter: blur(var(--end-blur));
  }
  .blur-overlay[data-state="closed"] {
    backdrop-filter: blur(0px);
  }
}

@property --overlay-blur {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports not (-moz-appearance: none) {
  .blur-overlay {
    transition: var(--duration) --overlay-blur var(--easing);
    -webkit-backdrop-filter: blur(var(--overlay-blur));
    backdrop-filter: blur(var(--overlay-blur));
  }
  .blur-overlay[data-state="open"] {
    --overlay-blur: var(--end-blur);
  }
  .blur-overlay[data-state="closed"] {
    --overlay-blur: 0px;
  }
}
```


Create cross-browser overlay with animated backdrop filter blur

Animated backdrop filter blur overlay | Artur Bień

Animated blur overlay


During the last WWDC23 Apple event where Apple Vision Pro was revealed,
I've noticed this cool [Blur Vignette effect](https://youtu.be/TX9qSaGXFyg?t=128)
that was applied to the 3D content when it's watched in a headset.

And so I've decided to recreate it with pure CSS!

Below you'll find a brief explanation of how it works and
a CSS generator that will let you customize the effect to your needs.

## How it works

The effect is achieved by creating an overlay with [**backdrop-filter: blur()**](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter),
and a [**mask-image**](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)
that creates the vignette. The mask is a combination of 6 gradients -
4 radial gradients for each corner and 2 linear gradients.

See the image below to understand how these gradients are combined into a mask.
The black areas mark the parts of our overlay that will be visible.

<BlurVignetteDemo.Masks />
<br />
<br />
Since it's just a more fancy overlay it will work for everything - you can place
it above videos, images or just regular HTML elements.

This vignette is also responsive and will adapt to the size of its container. 🔥

## Getting more creative

In this article I am only discussing the Blur Vignette, but
since we're operating with **backdrop-filter** you can get creative with
[different types of filters](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter),
not just blur, to achieve other interesting results.

Just switch up the filter and you can create a Grayscale Vignette, Sepia Vignette...whatever you like!

You can also stack multiple overlays with different
parameters on top of eachother to make the transition smoother.

Here are some examples of such usage:

<BlurVignetteDemo.Filters />

## Blur Vignette Generator

To use the Blur Vignette effect in your own project, add the **.blur-vignette**
element inside any container, then paste the CSS code from generator below
inside your project.

Make sure to match the **--radius** parameter with the **border-radius** of
the container and that the container **position** is set to relative / absolute / fixed.

<BlurVignetteDemo.BasicDemo />


Create Blur Vignette effects with pure CSS.

Blur Vignette effect in CSS | Artur Bień

Blur Vignette effect in CSS


At some point you might have tried doing a "cut out" or "knockout" effect with CSS.
Its an effect where part of an element is see through, appearing as if that
part was cut out.

There are a few techniques we could use to achieve similar effect:

1. [**clip-path**](https://bennettfeely.com/clippy/): allows you to specify a polygonal or circular shape
   (or any other shape defined in SVG **clipPath** primitive) to clip an element.
   The clipped portion of the element will be invisible, revealing the content behind it.

2. [**mask-image**](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image): lets you use images, CSS gradients or SVG graphic (or combinations of them)
   to mask or hide portions of an element. Similar to clip-path, the masked area will be
   invisible and reveal content underneath it.

3. [**SVG graphic with mask**](https://css-tricks.com/snippets/svg/svg-knockout-text/): you can define entire graphic with SVG and
   use the **mask** primitive to mask certain parts of it.

4. [**background-clip: text**](https://mgearon.com/css/css-background-clip-text/): The background of an element is clipped to the foreground text.

5. [**mix-blend-mode**](https://css-tricks.com/css-techniques-and-effects-for-knockout-text/): lets you blend HTML element with elements behind it.

There are, however, some limitations to these techniques. For example, you can't
use them to cut out text.
You could, of course, use a mask image with text in it, but it causes some major problems.
Imagine you have a website that supports 10 different languages -
you'd have to use 10 different mask images to support each language.
Not only that, but to make things accessible, you'd still have to add the text to the DOM,
then hide it visually.
Even if you did that, you would still miss out on responsiveness. Since the text is baked
inside an image, you're not getting things like text wrapping, word-break,
text-overflow ellipsis, and other features that we're so used to on the Web.

The **background-clip** approach only paints the text with the background of the element,
it doesn't really show what's behind it.

The only technique that **kinda** works with text is the **mix-blend-mode** but it
only really works if you want to use a black and white element, which is rarely the case.
Any other color combination will make entire element appear to be semi transparent.
On top of that, you won't get the desired effect when applying **drop-shadow()** filter to it,
as the element is not really cropped but blended with the background.

Most of these techniques are also awkward to work with, right?
I mean you have to use bunch of images, or work with SVG paths to define the
shape you want to make invisible.

Is there a better way to do it?

## The perfect technique

The perfect technique would allow us to explicitly specify which elements
we want to crop out of the target element. Effectively using DOM HTML elements
as a CSS mask. Something like:

"In **#my-element**, cut out its dashed border, heading and paragraph".

But then how do we actually tell the browser which parts need to be cropped out?
And how do we crop them?
Well, there's another way we can formulate our ask above, that will also
tell you what's the implementation. And it goes like this:

"In **#my-element**, make all of the black pixels transparent".

That would allow us to use any HTML element with a combination of any CSS property,
to achieve the effect we want. Since we're operating on color, we could crop out
dashed border, text shadow, background-image... you can crop literally any shape you want,
as long as its color is black.

I've called this technique ...

## Black Pixel Masking

Since we want to modify specific pixels of a target element,
we need to use a custom CSS SVG filter.

Here's how it works:

- with **feColorMatrix** we take the SourceGraphic and turning all non-black pixels
  fully transparent.
- then using **feMorphology** we're making these black pixels a tiny bit thicker,
  to make the edges of the cutout smoother.
- finally, with **feComposite** we're taking the SourceGraphic and clipping it
  with the result from the previous step.

```
<svg width="0" height="0">
  <filter id="remove-black" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              -255 -255 -255 0 1"
      result="black-pixels"
    />
    <feMorphology
      in="black-pixels"
      operator="dilate"
      radius="0.5"
      result="smoothed"
    />
    <feComposite in="SourceGraphic" in2="smoothed" operator="out" />
  </filter>
</svg>
```

Once you embed the SVG filter in your HTML, you can use it in CSS like so:

```
#my-element {
  filter: url(#remove-black);
}
```

The result you're going to see is that all black pixels are just removed,
leaving the rest of the element intact. See examples below and toggle
the checkbox to see how these examples look without the filter on.

<BlackPixelMaskingDemo.Demo />

<br />
<br />

Now, what if we want to have black elements inside
our target element that we don't want to be cropped out?

Then, we can use the white color instead of the black color to
target the pixels that we want to clip.

Then using CSS filter chaining, we invert all colors (so that white pixels turn black),
remove the black pixels using our filter, and finally inverting the colors again
to get the final result.

```
#my-element {
  filter: invert(1) url(#remove-black) invert(1);
}
```

<BlackPixelMaskingDemo.InvertDemo />

<br />
<br />
<Separator />

## Limitations

This technique seems to work reliably on all major browsers, but it has some limitations:

- you can only use black or white color to clip elements,
- the filter will not clip the **backdrop blur**,
  It will remove the color from marked areas, but the backdrop blur will stay
  (as opposed to CSS **mask** or **clip-path** which will remove the blur in the clipped area).
- the masked area is slightly thicker than black pixels on the target element due to
  smoothing.

  If you want more accurate clipping (with slightly jagged, dark edges), set **radius="0"**
  on the **feMorphology** element.


Creating knockout / cutout or see-through effects using new CSS SVG filter masking technique.

Using HTML elements as CSS masks | Artur Bień

Using HTML elements as CSS masks


Have you ever heard of the ["Ambilight Effect"](https://www.youtube.com/watch?v=FZE5I-GcVVM)?
It's a feature in some TVs that illuminates the wall behind the screen with
colors that match the content being displayed.
This effect enhances the viewing experience by "extending" the image beyond the
TV onto a wall behind it creating more immersive experience.

Some time ago I stumbled upon [this article](https://joebell.co.uk/craft/bias-lighting)
by Joe Bell where he tried to recreate the effect with CSS.

The problem he encountered was that implementing the effect using more
conventional CSS features involved using many elements and while
the result looked great for bright images, it didn't look nice for dark images.

What if there's another way to do it?

I challanged myself to recreate the effect using SVG filters
and eliminating both of the problems mentioned above.

Not only that, but since it's a filter, we could apply it to any element! (well, with some exceptions)

<Warning>
The filter doesn't work on videos and animated elements in **Safari** and **Firefox**.

Applying any complex filters might cause performance issues, so
try to use them sparingly and test them on different browsers and devices.

Results may slightly vary browser to browser so proceed with caution if you plan on using
this in production.

</Warning>

<AmbilightEffectDemo.TVDemo />

## How to use

As with any custom SVG filter, just paste the SVG in your HTML and then
apply it with CSS:

```
<svg width="0" height="0">
    <filter
        id="ambilight"
        width="300%"
        height="300%"
        x="-0.75"
        y="-0.75"
        color-interpolation-filters="sRGB"
    >
        <feOffset in="SourceGraphic" result="source-copy" />
        <feColorMatrix
            in="source-copy"
            type="saturate"
            values="3"
            result="saturated-copy"
        />
        <feColorMatrix
            in="saturated-copy"
            type="matrix"
            values="1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    33 33 33 101 -132"
            result="bright-colors"
        />
        <feMorphology
            in="bright-colors"
            operator="dilate"
            radius="10"
            result="spread"
        />
        <feGaussianBlur
            in="spread"
            stdDeviation="30"
            result="ambilight-light"
        />
        <feOffset in="SourceGraphic" result="source" />
        <feComposite in="source" in2="ambilight-light" operator="over" />
    </filter>
</svg>
```

```
.ambilight {
    filter: url(#ambilight);
}
```

## How it works

If you're new to SVG filters I highly recommend reading this awesome
[SVG Filters 101](https://tympanus.net/codrops/2019/01/15/svg-filters-101/)
article first.

So here's how the magical filter works.
It may look daunting but if you read it carefully
and play with the **Ambilight Effect Generator** in the next section you should
get an idea of what it actually does.

- Increase the **filter** Filter Region to 300% by using the
  **width** and **height** attributes, then centering the region with the **x** and **y** attributes.
  This makes sure that the "Ambilight" light source is not clipped by the
  object bounding box.
- First **feOffset** makes a copy of the **SourceGraphic**.
  It will be used as a base for our "Ambilight" light.
- Then, **feColorMatrix** takes that copy and saturates it by 3x.
- Then another **feColorMatrix** removes dark pixels from the previous step.
  The **-132** is our color cutoff parameter that removes pixels that
  are below **32%** brightness.
- **feMorphology** spreads the bright colors from the previous step outwards.
  This is our "spread" parameter that controls how far the "Ambilight" light
  source will spread.
- Then using **feGaussianBlur** we blur the previous step. This is our "blur" parameter
  that produces the final "Ambilight" light source effect.
- Finally, using **feOffset** we copy the original image again and use **feComposite** to
  combine it with the ambilight light source from the previous step.

## Ambilight Effect Generator

To see what happens under the hood, reset all sliders and check the
**"Hide source"** checkbox.

Then go fiddle with them one by one to see what happens!

The default state is what I figured was the best configuration for the filter,
but you can tweak it to your needs and generate a filter that suits you best.

<AmbilightEffectDemo.BasicDemo />


Use SVG filters to create the Ambilight Effect, which visually extends an element by illuminating area behind it.

Ambilight effect for the Web with CSS | Artur Bień

Ambilight effect for the Web with CSS


The RGB split effect, also known as RGB shift or 3D Anaglyph, is a popular
visual effect that adds a sense of depth and dimensionality to images
and videos. This effect is achieved by separating the red, green, and
blue color channels (or red and cyan) of an image or video and offsetting
them from each other. The result is a trippy, glitchy effect that makes
the image or video appear as if it is shifting or splitting apart.

While this effect is usually achieved by using a video editing software,
it is also possible to create it using CSS.

You might have already seen the effect recreated by
[stacking multiple elements on top of each other and applying **mix-blend-mode**](https://una.im/3d-effect/),
or in case of text by [using multiple **text-shadow**s](https://medium.com/@saratietz/css-anaglyph-text-effect-4afdb0803228).

However, there's simpler **custom CSS filter** approach that will let you
apply the effect to any element without the need to duplicate elements
or use multiple shadows.

<RGBSplitDemo.DemoButton />

In this blog post I'll explain how this effect works, how to use it
and I'll give you a tool for generating your own RGB split effects. Let's dive into it!

## How to use

Here's the filter that has to be embedded in HTML before we use it in CSS:

```
<svg width="0" height="0">
  <filter id="rgb-split">
    <feOffset in="SourceGraphic" dx="2" dy="2" result="layer-one" />
    <feComponentTransfer in="layer-one" result="red">
        <feFuncR type="identity" />
        <feFuncG type="discrete" tableValues="0" />
        <feFuncB type="discrete" tableValues="0" />
    </feComponentTransfer>

    <feOffset in="SourceGraphic" dx="-2" dy="-2" result="layer-two" />
    <feComponentTransfer in="layer-two" result="cyan">
        <feFuncR type="discrete" tableValues="0" />
        <feFuncG type="identity" />
        <feFuncB type="identity" />
    </feComponentTransfer>

    <feBlend in="red" in2="cyan" mode="screen" result="color-split" />
  </filter>
</svg>
```

Then in CSS all you have to do is:

```
#some-element {
  filter: url(#rgb-split);
  transform: translateZ(0);
}
```

The **transform: translateZ(0);** improves the rendering in Safari
and removes some of the artifacts that filter sometimes creates.

## How it works

- The **feOffset** primitives are used to create two duplicate layers of the image:
  one shifted to the right and downwards (**dx="2" dy="2"**) and the other one shifted
  to the left and upwards (**dx="-2" dy="-2"**).
- The **feComponentTransfer** primitives are used to modify the color channels
  of each layer.

  In the first one, only the red channel is kept while the green and blue channels
  are turned off (resulting in <span style={{color: "red"}}>**red**</span> layer).

  ```
  <feOffset in="SourceGraphic" dx="2" dy="2" result="layer-one" />
  <feComponentTransfer in="layer-one" result="red">
      <feFuncR type="identity" />
      <feFuncG type="discrete" tableValues="0" />
      <feFuncB type="discrete" tableValues="0" />
  </feComponentTransfer>
  ```

  For the second layer its the opposite - green and blue channels are kept
  and the red channel is turned off (resulting in <span style={{color: "cyan"}}>**cyan**</span> layer).

  ```
  <feOffset in="SourceGraphic" dx="-2" dy="-2" result="layer-two" />
  <feComponentTransfer in="layer-two" result="cyan">
      <feFuncR type="discrete" tableValues="0" />
      <feFuncG type="identity" />
      <feFuncB type="identity" />
  </feComponentTransfer>
  ```

- Finally **feBlend** is used to blend the two modified layers of the
  image (red and cyan) together using the "screen" mode. This mode brightens
  the image, and helps to create the RGB split effect.

## The "RGB split" CSS filter generator

To make things easier for you, I've created this simple RGB split effect
generator that will let customize it to your needs.

There's also an option to copy the inlined CSS filter so you can use it directly
in CSS without having to embed the SVG in HTML.

<Warning>
  Unfortunately inlined CSS SVG filters are **not** supported by **Safari
  (16.4)** so you need to embed SVG in HTML to support all browsers.
</Warning>

<RGBSplitDemo.Interactive />


The RGB split effect, also known as RGB shift or 3D Anaglyph, is a popular visual effect that adds a sense of depth and dimensionality to images and videos.

RGB split (3D Anaglyph) glitch effect with CSS SVG filter | Artur Bień

RGB split (3D Anaglyph) glitch effect with CSS SVG filter


Hey there! Are you ready to learn about a cool new CSS trick?

With the new [**@property** (at-rule) CSS API](https://developer.mozilla.org/en-US/docs/Web/CSS/@property),
we can easily transition values of custom properties (also known as CSS variables)
just like we do with other CSS properties like opacity or transform. It's like magic! ✨

This feature is super powerful and lets us create all sorts of fancy
reveal effects by animating masks. Want to see it in action? Check
out these awesome examples below!

<Warning>
  As of April 2023, <strong>@property API</strong> is only supported in Chrome
  85+ and Safari 16.4+.
</Warning>

## Blinds

The "Blinds" effect is a mask animation that creates the illusion of
window blinds being opened or closed as you hover over an element.
This effect is achieved by animating a series of horizontal or vertical
segments that cover the content of the element.

```
@property --segment-size {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.blinds {
    --initial-segment-size: 20px;
    --segment-size: var(--initial-segment-size);
    -webkit-mask-image: repeating-linear-gradient(
      to bottom,
      #000000,
      #000000 var(--segment-size),
      transparent var(--segment-size),
      transparent var(--initial-segment-size)
    );
    transition: --segment-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.blinds:hover {
    --segment-size: 0px;
}
```

<FancyRevealEffects variant="blinds" />

## Wipe

The "Wipe" effect is another CSS mask animation that creates
the illusion of an element being wiped clean or erased.
This effect is achieved by animating a mask gradient that
covers the content of the element.

When the animation starts, the mask gradient moves across the element,
gradually revealing the underlying content. As it moves, the content
appears to be wiped clean or erased, creating the illusion of a fresh start
or a new beginning.

```
@property --wipe-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

.wipe {
    --wipe-position: 100%;
    --gradient-length: 20%;
    -webkit-mask-image: linear-gradient(
      to bottom right,
      black var(--wipe-position),
      transparent calc(var(--wipe-position) + var(--gradient-length)),
      transparent
    );

    transition: --wipe-position 600ms cubic-bezier(0, 0.55, 0.45, 1);
}

.wipe:hover {
    --wipe-position: calc(-1 * var(--gradient-length));
}
```

<FancyRevealEffects variant="wipe" />

## Clock

The "Clock" effect is an animation that creates the illusion of an
element being wiped in a circular motion, just like the hands of a clock.
This effect is achieved by animating a conic gradient mask that covers the
content of the element.

When the animation starts, the mask moves across the element
in a circular motion, gradually revealing the underlying content.

This effect is perfect for creating a sense of time passing or for
indicating progress.

```
@property --clock-hands-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

.clock {
    --clock-hands-position: 100%;
    --gradient-length: 30%;
    -webkit-mask-image: conic-gradient(
      black var(--clock-hands-position),
      transparent calc(var(--clock-hands-position) + var(--gradient-length)),
      transparent
    );

    transition: --clock-hands-position 1s ease;
}
.clock:hover {
    --clock-hands-position: calc(-1 * var(--gradient-length));
}
```

<FancyRevealEffects variant="clock" />

## Iris

The "Iris" effect is a CSS animation that creates the illusion of an
element's content being revealed in a radial direction, like the
opening of an eye's iris. This effect is achieved by animating a
radial gradient mask that starts from the center of the element and expands
outwards to reveal the underlying content.

When the animation starts, the radial mask gradually expands in
outwards motion, revealing more and more of the underlying content as
it expands.

This effect is perfect for creating a sense of unveiling or discovery.

```
@property --iris-radius {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --iris-gradient-length {
    syntax: "<length> | <percentage>";
    inherits: false;
    initial-value: 0px;
}

.iris {
    --iris-radius: 100%;
    --iris-gradient-length: 60px;
    --time: 600ms;

    -webkit-mask-image: radial-gradient(
      black,
      black var(--iris-radius),
      transparent calc(var(--iris-radius) + var(--iris-gradient-length)),
      transparent
    );
    transition: --iris-radius var(--time) cubic-bezier(0, 0.55, 0.45, 1),
                --iris-gradient-length var(--time) ease-out;
}

.iris:hover {
    --iris-radius: -50%;
    --iris-gradient-length: 0px;
}
```

<FancyRevealEffects variant="iris" />

<Separator style={{ marginTop: 32, marginBottom: 32 }} />

Now lets see how we can combine multiple masks together to make even
crazier effects.

If you want to learn how mask composition works read this
[awesome article from Oscar Jite-Orimiono](https://blog.logrocket.com/css-mask-image-property/#mask-composite).

<Warning>
  Examples below are using **mask-composite** property that is only supported in
  Safari and Firefox. To make them work in Chrome I'm using a fallback to
  **-webkit-mask-composite** which is a [non standard CSS property that is not
  on a standards
  track](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite)
  (but works in Chrome and Safari).
</Warning>

## Iris Clock

The "Iris-clock" effect is a combination of the "Iris" and the "Clock" effects.
The **mask-composite** is set to **intersect** so that the final mask
is the intersection of the two masks.

And of course we're animating both of them!

<FancyRevealEffects variant="iris-clock" />

## Diamond Wipe

Here three masks are combined together.
Two **repeating-linear-gradient** masks "dissolve" the target in
a diamond shape, and then the "Wipe" effect is added on top of them.

<FancyRevealEffects variant="diamond-wipe" />

## Iris grid

Similar to the previous example but now the **repeating-linear-gradient**
masks dissolve the target in a grid shape with the "Iris" effect added on top.

<FancyRevealEffects variant="iris-grid" />

## Mixer

The "Mixer" is a monstrosity that comes from combining "Blinds", "Clock" and "Iris"
effects together.

This time the **mask-composite** is set to **exclude**
so that the non-overlapping regions of source mask and destination
mask are combined.

<FancyRevealEffects variant="mixer" />

<Separator style={{ marginTop: 32 }} />

## Conclusion

CSS masks and custom properties can be combined to
create a range of impressive reveal effects that can give your apps
more flair.

We barely scratched the surface of what's possible and I can't wait to see
more complex examples of this technique in action.
So give it a try and let your creativity run wild! ❤️


Utilizing @property API to create fancy reveal effects by animating masks.

Fancy reveal animations with CSS masks and @property | Artur Bień

Fancy reveal animations with CSS masks and @property


In the previous blog post I've discussed [how to create heat
map color grading using pure CSS](https://expensive.toys/blog/pure-CSS-heatmap).
That approach while simple has two major limitations:

- if you want to create multi color scale (more than two colors)
  you're limited by the order of the colors on the hue color wheel
- it will not work on videos or images or complex elements
  with gradients that represent a data set

The new **SVG filter technique** that I am about to show you is much more flexible
allowing you to not only create **any** color scale you want but also apply it to
any element on a page - image, video, canvas, you name it!

## How it works

First of all, SVG filters are shaders for DOM elements.
A shader is a programme that changes the color or a position of each
pixel of an element the shader is applied to.

There's **feComponentTransfer** filter effect that allows us to change the color
of each pixel by remapping each color channel in a pixel (**R**, **G**, **B** and **A**)
to a new value. In particular it remaps the color channel to a place on
a gradient that we can define.

So how can we leverage that?

The starting point is - get any data set and represent each data point with a color
so that the min value is black, max value is white and everything in
between is a shade of gray. You can represent the data with HTML elements
or an image, whatever you like. For this simple demo, let's use
a div with black to white gradient background.

<SVGFilterHeatMaps.GradientDemo variant="before" />
<br />

Then using **feComponentTransfer** write a programme that will remap color of each
pixel to a value on a gradient defined by us. Let's start with a blue to red gradient.

Important thing here is that color component functions see color channels as fractons
(values 0 to 1) as opposed to CSS rgb() that takes values ranging from 0 to 255.

To convert any RGB color to fractions, just divide its R, G and B channel by 255:

```
Blue:              Red:

R:   0/255 = 0     R: 255/255 = 1
G:   0/255 = 0     G:   0/255 = 0
B: 255/255 = 1     B:   0/255 = 0
```

Then put these colors inside the **tableValues** attributes:

```
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <filter id="blue-red" color-interpolation-filters="sRGB">
    <feComponentTransfer>
        <feFuncR type="table" tableValues="0 1" />
        <feFuncG type="table" tableValues="0 0" />
        <feFuncB type="table" tableValues="1 0" />
    </feComponentTransfer>
    </filter>
</svg>
```

When you apply above filter to the black to white gradient this is what you get -
the min value (black pixels) become blue, max value (white pixels) become
red and everything in between (shades of grey) become something inbetween (purple'ish).

<SVGFilterHeatMaps.GradientDemo variant="after" />

## Thermal vision

Now let's do something cool. Let's define another filter for a **thermal vision** effect.
The colors we're going to use are:

```
Black:         Navy:                Pink:                Orange:              White:

R: 0/255 = 0   R:  32/255 = 0.125   R: 204/255 = 0.8     R: 255/255 = 1       R: 255/255 = 1
G: 0/255 = 0   G:   0/255 = 0       G:   0/255 = 0       G: 215/255 = 0.843   G: 255/255 = 1
B: 0/255 = 0   B: 140/255 = 0.549   B: 119/255 = 0.466   B:   0/255 = 0       B: 255/255 = 1
```

The filter looks like this:

```
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="thermal-vision" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0  0.125  0.8    1      1" />
      <feFuncG type="table" tableValues="0  0      0      0.843  1" />
      <feFuncB type="table" tableValues="0  0.549  0.466  0      1" />
    </feComponentTransfer>
  </filter>
</svg>
```

Now let's apply it to the grid from the [previous blog post](https://expensive.toys/blog/pure-CSS-heatmap):

<SVGFilterHeatMaps.ThermalVisionFilter />
<SVGFilterHeatMaps.GridDemo />
<br />
Awesome, isn't it?

Now let's try it out on a black **div** with blurred white
circles and white text stacked on top of each other

<SVGFilterHeatMaps.ThermalVisionDemo />
<br />

It works even on images!

<SVGFilterHeatMaps.ImagesDemo />
<br />

But what if your image or element represents data in reverse,
where min value is white and max value is black?

You could just reverse the order of colors in **feComponentTransfer**
but there's way simpler way than that! Fortunately you can chain
CSS filters, so before you apply the **#thermal-vision** filter
apply the **invert(1)** filter:

```
img {
  filter: invert(1) url(#thermal-vision);
}
```

<SVGFilterHeatMaps.InvertedImagesDemo />


Leveraging the power of SVG filters to create advanced heat maps and thermal vision effect with CSS.

CSS heat map and thermal vision effect (SVG filters) | Artur Bień

CSS heat map and thermal vision effect (SVG filters)


A heat map is a type of data visualization that uses color to represent
different values or ranges of data. The color scale of a heat map is used
to represent the intensity or magnitude of a particular data point, with
warmer colors like red or yellow indicating higher values and cooler colors
like blue or green indicating lower values.

Heat maps are often used in a variety of applications, including:

- Geographic data, to show the distribution of data points or variables
  across a map,
- Medical imaging, to highlight areas of disease or injury in an image,
- Website analytics, to show which areas of a website are most popular
  or frequently clicked on by users,
- Fitness and health apps: Some fitness and health apps use heat maps
  to track and visualize data on user's activities, such as running and sleep patterns.
- Github uses heat maps in the "contribution graph" section of a user's profile to
  visualize the frequency of code changes made by the user over time. The heat map is
  a graphical representation of the number of commits made to the repositories at different
  times, and it shows when the most activity is taking place.

In this blog post I'll show you three examples of heat maps that you can create with just CSS
without having to install external packages or writing JavaScript:
a rainbow color scale, a single color sequential scale, and a two-color
sequential scale. Each example is accompanied by the corresponding CSS code,
which you can use and modify to create your own heat maps.

All you have to do is:

- copy and paste the styles of the type of heat map you like,
- set the class name on an element
- set the **--intensity** CSS property (a number between 0 and 1) representing
  a magnitude of phenomenon for a given data point.

Resulting heatmap should be a grid of elements looking something like this:

```
...
<div class="blue-to-red" style="--intensity: 0.2"></div>
<div class="blue-to-red" style="--intensity: 0.52"></div>
<div class="blue-to-red" style="--intensity: 0.68"></div>
...
```

## 1. Rainbow color scale

When creating the rainbow color scale the background color is set using
the HSL color model, where the hue is determined by the **--intensity** value.
We're starting with blue (240deg) when **--intensity** is 0 and going
to red (0deg) when **--intensity** is 1.

```css
.rainbow {
  --hue: calc((1 - var(--intensity)) * 240);
  background: hsl(var(--hue), 100%, 50%);
}
```

<CssHeatMaps.SimpleDemo variant="rainbow" />

## 2. Single color sequential scale

This type of a heatmap while not as fancy as the previous one,
is in many ways more readable and better suited for color-blind people.
In this example we're creating a color scale that goes from white to dark green
using linear interpolation:

```css
.green {
  --r: 3;
  --g: 72;
  --b: 29;

  background: rgb(
    calc(255 - ((255 - var(--r)) * var(--intensity))),
    calc(255 - ((255 - var(--g)) * var(--intensity))),
    calc(255 - ((255 - var(--b)) * var(--intensity)))
  );
}
```

<CssHeatMaps.SimpleDemo variant="green" />

## 3. Two color sequential scale

By modyfying a bit code above you can get a color scale that interpolates between
two specified colors. Here, let's interpolate between blue and red:

```css
.blue-to-red {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  background: rgb(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity)))
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-to-red" />
<br />

Sometimes you just may want to only highlight the extremes. To do that we're
going to use the RGBA color model, which is similar to RGB but with an additional
"alpha" value that represents the transparency of the color.
We'll make it so that the color will be fully opaque when at the extremes
(blue or red or 1 intensity respectively) and fully transparent when at the
middle value (0.5 intensity).

```css
.blue-transparent-red {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  /* remaps the "--intensity" value to range from -1 to 1 */

  --alternate: calc((0.5 - var(--intensity)) * 2);

  /* takes an absolute value of "--alternate" this way 
    when "--intensity" is equal 0 or 1 the alpha = 1
    but when its 0.5 (middle value) the alpha = 0 */

  --alpha: max(var(--alternate), -1 * var(--alternate));

  background: rgba(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity))),
    var(--alpha)
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-transparent-red" />
<br />

That's good, but we can make it even better by applying easing
to the alpha channel:

```css
.blue-transparent-red-eased {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  /* remaps the "--intensity" value to range from -1 to 1 */

  --alternate: calc((0.5 - var(--intensity)) * 2);

  /* takes an absolute value of "--alternate" this way 
    when "--intensity" is equal 0 or 1 the alpha = 1
    but when its 0.5 (middle value) the alpha = 0 */

  --alpha: max(var(--alternate), -1 * var(--alternate));

  /* Apply cubic easing to the alpha channel */

  --alpha-ease-cubic: calc(var(--alpha) * var(--alpha) * var(--alpha));

  background: rgba(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity))),
    var(--alpha-ease-cubic)
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-transparent-red-eased" />
<br />
<br />
Aaaand...that's a wrap! As you can see you can create beautiful heatmaps with just
few lines of CSS without having to rely on JavaScript or external packages. Have
fun experimenting!


A clever way to create heat map color grading with simple CSS.

Blog