Loading...

Create SVG Filters for Illustrator

Convert your PSD layers to Illustrator SVG filter effects. Lightning Storm makes SVG filters and effects for Illustrator a breeze with support for complex Photoshop layer effects to SVG with our exclusive Filter Flow Technology. You can create your layer effects in Photoshop, then cut-and-paste the SVG filters into Illustrator – easy pezy!

IMPORTANT: SVG Filters require both Layer Kit - SVG View and Layer Kit - Pro.

Create your Effects in Photoshop

Create any custom layer effect in your PSD, Export Kit uses a custom Filter Flow Technology to ensure your Illustrator SVG effects are pixel-perfect. Effects in Photoshop will not render the same as a website, we strongly recommend you read more about Effects and Styles to learn which effects and properties are supported.

SVG Support is based on Photoshop/HTML rendering rules, not all Photoshop effects are supported in HTML and SVG Filters – additionally Photoshop is perfect, others are not!

Learn more about Effects and Styles Support.

Step 1: Use SVG View with Lightning Storm

Open Lightning Storm, enable Layer Effects, then copy the filter tag. Lightning Storm will render the full SVG layer element, but with Illustrator you will only require the actual filters rendered by Lightning Storm.

IMPORTANT: Some effects will require tweaking to get the optimal render, others require the correct properties applied.
Learn more about Effects and Styles Support.

Step 2: Paste the filter into Illustrator

In Illustrator, open your SVG Filters and click “New SVG Filter”. Then paste the code! That’s it, Export Kit will convert your Photoshop layer effects to the correct Illustrator SVG filters required to drop-and-go.

Step 3: Done!

Now you can use your custom Illustrator SVG filter with any design.

Example SVG Filters

Can’t wait or just want to see some examples, take a look a few filters created from Photoshop using SVG View.

NOTE: Remember to view source, these are pure SVG Paths and Filters created from Photoshop.

Glowing Rainbow

1
2
3
4
5
6
7
<filter id="heart_filter" x="-25%" y="-25%" width="150%" height="150%">
    <feOffset result="og-b" in="SourceAlpha" dx="0" dy="0" />
    <feGaussianBlur result="og-s" in="og-b" stdDeviation="3" />
    <feFlood flood-color="#f8f9f9" flood-opacity="1" result="og-f"/>
    <feComposite operator="in" in="og-f" in2="og-s" result="og-c"/>
    <feBlend in="SourceGraphic" in2="og-c" result="og" mode="normal" />
</filter>

Question This

NOTE: We will corect the stroke issue with SVG Paths in a new release of Lightning Storm.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<filter id="question_filter" x="-25%" y="-25%" width="150%" height="150%">
    <feOffset result="ffx-b1" in="SourceAlpha" dx="3" dy="3" />
    <feOffset result="ffx-b2" in="SourceAlpha" dx="-3" dy="-3" />
    <feOffset result="ffx-b3" in="SourceAlpha" dx="3" dy="-3" />
    <feOffset result="ffx-b4" in="SourceAlpha" dx="-3" dy="3" />
    <feOffset result="ffx-b5" in="SourceAlpha" dx="0" dy="3" />
    <feOffset result="ffx-b6" in="SourceAlpha" dx="0" dy="-3" />
    <feOffset result="ffx-b7" in="SourceAlpha" dx="3" dy="0" />
    <feOffset result="ffx-b8" in="SourceAlpha" dx="-3" dy="0" />
    <feMerge result="ffx-b">
        <feMergeNode in="ffx-b1" />
        <feMergeNode in="ffx-b2" />
        <feMergeNode in="ffx-b3" />
        <feMergeNode in="ffx-b4" />
        <feMergeNode in="ffx-b5" />
        <feMergeNode in="ffx-b6" />
        <feMergeNode in="ffx-b7" />
        <feMergeNode in="ffx-b8" />
    </feMerge>
    <feFlood flood-color="#000000" flood-opacity="1" result="ffx-bc"/>
    <feComposite operator="in" in="ffx-bc" in2="ffx-b" result="ffx-bg" />
    <feMerge result="ffx">
        <feMergeNode in="ffx-bg" />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
    <feOffset result="ds-d" in="SourceAlpha" dx="5" dy="9" />
    <feGaussianBlur result="ds-s" in="ds-d" stdDeviation="1" />
    <feFlood flood-color="#000000" flood-opacity="1" result="ds-f"/>
    <feComposite operator="in" in="ds-f" in2="ds-s" result="ds-c"/>
    <feBlend in="ffx" in2="ds-c" result="ds" mode="normal" />
</filter>
LOGIN NOW: Get instant access to our free Online Training - click here.

Using the Plugin

How To Guides

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Responsive Multi-Page Website

A clean responsive website with multiple pages +target screens.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us

BLACK OUT SALE | LAST CHANCE | OVER 90% OFF - Limited time only, Buy Now.