CSS Custom Filters

Disclaimer: The features listed below are no longer supported and therefore do not work in modern browsers. They were available through an experimental flag in chromium based browsers.

What are CSS Custom Filters?

Although there is almost no information left on the internet, the principle is very simple. Custom filters allow you to run any element through a 3D pipeline. You can think of it as a function that takes the 2D pixel coordinates of an element as input and returns the 3D coordinates. This would allow effects like distorting an image:

(Source)

Using CSS you would specify vertex and fragment shaders and some other information to apply the custom filter on the element.

.customShader {
    -webkit-filter: custom(
        url(vertexShader.vert)
        mix(url(fragmentShader.frag) normal source-atop),
        50 50, /* Rows, Columns - rasterized automatically */
        time 0 /* Other parameters (uniforms) */
    )
}

What’s the benefit?

If you have played around with CSS transform before, you might know why this would be powerful. Non-linear transformations like those above will still maintain their interactivity (e.g., hovering effects) and can be animated in real-time.

Although a lot of 3D effects are possible using the modern CSS transform, some are still hard to achieve. For example, projecting images onto a 3D sphere. It is impossible to get the curvature of the image correct while at the same time keeping its interactivity right.

Why were custom filters discontinued?

I think there are a few reasons why this feature was abandoned.

1. Security concerns: It could potentially be exploited for malicious purposes because shaders run on your graphics card.
2. Complex implementation: A powerful feature like this requires browser engine optimization and can introduce performance issues if not handled carefully.
3. Focus on other features: Without widespread adoption, there might not have been enough motivation to prioritize development, and focus shifted towards other features.

Similar solutions

If you’re just looking for a way to do simple transformations like translations or rotations, CSS transform will probably be enough.

A more sophisticated solution requires a 3D library like Three.js and using WebGL or WebGPU. One way to rasterize the HTML elements would be to put them into SVG and render the SVG onto a canvas.

Conclusion

I think it’s very understandable why this feature was abandoned. The 3D effects we are missing out on are better done using WebGL or WebGPU. If it would’ve worked together with CSS features like hover effects and borders, this feature would’ve been incredible. It was also very short-lived, as nowadays it’s impossible to find any articles on this feature.