Filters

Add within scope of your filtered element. To use globally throughout your application, add this to your application's root layout. Only import the filters you plan to use.

import { Emerald, BlueNight, /* ... */  } from '@skeletonlabs/skeleton';

<Emerald />
<BlueNight />

Applying a Filter

Use of of the two menthods below to apply your desired filter. Be sure to include the required hash mark as shown.

Via the Svelte Action

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

import { filter  } from '@skeletonlabs/skeleton';

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

Via Style Attribute

Alternatively you may apply filters using inline CSS. This is what the action is doing under the hood.

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

How It Works

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

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.