Filters

Svelte Action

Applies a set of unique SVG filters. Best used with images, but also available to select components, such as Avatars.

@skeletonlabs/skeleton
View Source
Doc Source

Examples

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

Usage

Import SVG Filters

Add within scope of your filtered element. For global scope, add the following to your app's root component. Only import the filters you plan to use.

javascript 
import { Emerald, BlueNight, /* ... */  } from '@skeletonlabs/skeleton';
html 
<Emerald />
<BlueNight />

Applying a Filter

Use of of the two menthods below to apply your desired filter.

Via the Svelte Action

Use the following Svelte action to to filter any element.

html 
<img src={myImageSrc} use:filter={'BlueNight'}>

Via Style Attribute

Alternatively you may apply filters using CSS. This is what the action does for you. Note the hash mark is required.

html 
<img src={myImageSrc} style="filter: url({'#Emerald'})">

Create a Filter

Easily generate your own filters using this tool by Rik Schennink.

Create Filter

Browser Support

Please be aware that browser support varies. Some filters are not functional in Safari, while Firefox is not supported at all. We recommend using progressive enhancement when using filters in non-supported browsers.

Chrome: Full

Edge: Full

Safari: Partial

Firefox: None