Svelte Action

Filters

Apply Instagram-like filter effects to images.

typescript 
import { filter } from '@skeletonlabs/skeleton';
Source Page Source

Demo

example Original
example Emerald
example BlueNight
example XPro
example Summer84
example Rustic
example Apollo
example GreenFall
example Noir
example NoirLight

Add each filter you plan to use within the scope of your filtered elements. To use globally throughout your application, add this to your application's root layout. Avoid importing filters you are not using.

Applying a Filter

Use either of the two methods below to apply your desired filter. The hash mark is required.

Use the following Svelte action to filter any element. Pass the filter name as the only parameter.

typescript 
import { filter } from '@skeletonlabs/skeleton';
html 
<img src={myImageSrc} use:filter={'#BlueNight'}>

How It Works

This feature is enabled by the use of native browser SVG filters via feColorMatrix transformations.

Create a Custom Filter

Use this tool by Rik Schennink to easily generate your own custom filters.

Create a Filter

Browser Support

Please be aware that SVG filters have limited support in Safari, while Firefox is not supported at all. We're aware that MDN and caniuse.com both list this as fully supported in Firefox, but in practice the filter: url() effects do not appear. Given this, we've opted to excluded support for Firefox for the time being. If support changes, we will gladly revert this.

Chrome

Full

Edge

Full

Safari

Partial

Firefox

Excluded