Svelte Action

Filters

Apply Instagram-like filter affects 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 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 menthods below to apply your desired filter. The hash mark is required.

Use the following Svelte action to 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 by Rik Schennink to easily generate your own custom filters.

Create a Filter

Browser Support

Please be aware that browser support varies for this feature. Some filters are not functional in Safari, while Firefox is not supported at all. For non-supported browsers the filter will not be present but the image will still display, which allows for progressive enhancement.

Chrome: Full

Edge: Full

Safari: Partial

Firefox: None