Apply to HTML elements the SVG filters of inkscape preset filters
Inkscape includes a lot of preset filters (in the "Filters" menu). This page is a demo showing the use of the SVG filters to HTML elements. Some filters may not be rendered correctly with your browser.
Bevels
Bloom
Soft, cushion-like bevel with matte highlights
Bright Metal
Bright metallic effect for any color
Button
Soft bevel, slightly depressed middle
Combined Lighting
Basic specular bevel to use for building textures
Dark Glass
Illuminated glass effect with light coming from beneath
Deep Colors Plastic
Transparent plastic with deep colors
Electronic Microscopy
Bevel, crude light, discoloration and glow like in electronic microscopy
Fat Oil
Fat oil with some adjustable turbulence
Glowing Metal
Glowing metal texture
Jigsaw Piece
Low, sharp bevel
Matte Bevel
Soft, pastel-colored, blurry bevel
Melted Jelly
Glossy bevel with blurred edges
Melted Jelly Matte
Matte bevel with blurred edges
Metal Casting
Smooth drop-like bevel with metallic finish
Molten Metal
Melting parts of object together, with a glossy bevel and a glow
Neon
Neon light effect
Pressed Steel
Pressed metal with a rolled edge
Raised Border
Strongly raised border around a flat surface
Ridged Border
Ridged border with inner bevel
Smart Jelly
Same as Matte jelly but with more controls
Stained Glass
Illuminated stained glass effect
Translucent
Illuminated translucent plastic or glass effect
Blurs
Apparition
Edges are partly feathered out
Blur Double
Overlays two copies with different blur amounts and modifiable blend and composite
Evanescent
Blur the contents of objects, preserving the outline and adding progressive transparency at edges
Bumps
Basic Diffuse Bump
Matte emboss effect
Basic Specular Bump
Specular emboss effect
Basic Two Lights Bump
Two types of lighting emboss effect
Bubbly Bumps
Flexible bubbles effect with some displacement
Bubbly Bumps Alpha
Same as Bubbly Bumps but with transparent highlights
Bubbly Bumps Matte
Same as Bubbly Bumps but with a diffuse light instead of a specular one
Bump Engraving
Carving emboss effect
Canvas Bumps
Canvas texture with an HSL sensitive height map
Canvas Bumps Alpha
Same as Canvas Bumps but with transparent highlights
Canvas Bumps Matte
Same as Canvas Bumps but with a diffuse light instead of a specular one
Convoluted Bump
Convoluted emboss effect
Dark Emboss
Emboss effect : 3D relief where white is replaced by black
Embossed Leather
Combine a HSL edges detection bump with a leathery or woody and colorizable texture
HSL Bumps Alpha
Same as HSL Bumps but with transparent highlights
Jelly Bump
Convert pictures to thick jelly
Linen Canvas
Painting canvas emboss effect
Paper Bump
Paper like emboss effect
Plaster
Combine a HSL edges detection bump with a matte and crumpled surface effect
Plaster Color
Colored plaster emboss effect
Plasticine
Matte modeling paste emboss effect
Plastify
HSL edges detection bump with a wavy reflective surface effect and variable crumple
Relief Print
Bumps effect with a bevel, color flood and complex lighting
Rough Canvas Painting
Painting canvas emboss effect
Thick Acrylic
Thick acrylic paint texture with high texture depth
Thick Paint
Thick painting effect with turbulence
Tinfoil
Metallic foil effect combining two lighting types and variable crumple
Velvet Bumps
Gives Smooth Bumps velvet like
Wrinkled Varnish
Thick glossy and translucent paint texture with high depth
Color
Black Light
Light areas turn to black
Blend Opposites
Blend an image with its hue opposite
Fluorescence
Oversaturate colors which can be fluorescent in real world
Hue to White
Fades hue progressively to white
Paint Channels
Colorize separately the three color channels
Simulate CMY
Render Cyan, Magenta and Yellow channels with a colorizable background
Soft Colors
Adds a colorizable edges glow inside objects and pictures
Trichrome
Like Duochrome but with three colors
Distort
Chalk and Sponge
Low turbulence gives sponge look and high turbulence chalk
Lapping
Something like a water noise
Pixel Smear
Van Gogh painting effect for bitmaps
Ripple
Horizontal rippling of edges
Rough and Dilate
Create a turbulent contour around
Roughen Inside
Roughen all inside shapes
Swirl
Paint objects with a transparent turbulence which wraps around color edges
Torn Edges
Displace the outside of shapes and pictures without altering their content
Torn Edges
Displace the outside of shapes and pictures without altering their content
Fill and Transparency
Fill Background
Adds a colorizable opaque background
Flatten Transparency
Adds a white opaque background
Monochrome Transparency
Convert to a colorizable transparent positive or negative
Posterized Light Eraser
Create a semi transparent posterized image
Saturation Map
Creates an approximative semi-transparent and colorizable image of the saturation levels
Image Effects
Age
Imitate aged photograph
Film Grain
Adds a small scale graininess
Sharpen
Sharpen edges and boundaries within the object, force=0.15
Sharpen More
Sharpen edges and boundaries within the object, force=0.3
Soft Focus Lens
Glowing image content without blurring it
Image Paint and Draw
Alpha Draw Liquid
Gives a transparent fluid drawing effect with rough line and filling
Alpha Engraving
Gives a transparent engraving effect with rough line and filling
Alpha Engraving B
Gives a controllable roughness engraving effect to bitmaps and materials
Blueprint
Detect color edges and retrace them in blue
Chromolitho Alternate
Old chromolithographic effect
Cross Noise Poster
Overlay with a small scale screen like noise
Cross Noise Poster B
Adds a small scale screen like noise locally
Image Drawing Basic
Enhance and redraw color edges in 1 bit black and white
Light Contour
Uses vertical specular light to draw lines
Liquid Drawing
Gives a fluid and wavy expressionist drawing effect to images
Litho
Create a two colors lithographic effect
Marbled Ink
Marbled transparency effect which conforms to image detected edges
Oil Painting
Simulate oil painting style
Old Postcard
Slightly posterize and draw edges like on old printed postcards
Pencil
Detect color edges and retrace them in grayscale
Poster Color Fun
Poster Draw
Enhance and redraw edges around posterized areas
Poster Rough
Adds roughness to one of the two channels of the Poster paint filter
Materials
3D Marble
3D warped marble texture
3D Mother of Pearl
3D warped, iridescent pearly shell texture
3D Wood
3D warped, fibered wood texture
Cracked Lava
A volcanic texture, a little like leather
Enamel Jewelry
Slightly cracked enameled texture
Eroded Metal
Eroded metal texture with ridges, grooves, holes and bumps
Flex Metal
Bright, polished uneven metal casting, colorizable
Gold Paste
Fat pasted cast metal, with golden highlights
Gold Splatter
Splattered cast metal, with golden highlights
Iridescent Beeswax
Waxy texture which keeps its iridescence through color fill change
Leopard Fur
Leopard spots (loses object's own color)
Lizard Skin
Stylized reptile skin texture
Metallized Paint
Metallized effect with a soft lighting, slightly translucent at the edges
Peel Off
Peeling painting on a wall
Morphology
Black Hole
Creates a black light inside and outside
Contouring Discrete
Sharp multiple contour for objects
Contouring Table
Blurred multiple contours for objects
Cool Outside
Blurred colorized contour, empty inside
Posterized Blur
Converts blurred contour to posterized steps
Warm Inside
Blurred colorized contour, filled inside
Non-realistic 3D Shaders
Aluminium
Aluminium effect with sharp brushed reflections
Aluminium Emboss
Satiny aluminium effect with embossing
Brush Draw
Draft painted cartoon shading with a glassy look
Brushed Metal
Satiny metal surface effect
Chrome
Bright chrome effect
Chrome Emboss
Embossed chrome effect
Comics
Comics cartoon drawing effect
Comics Cream
Comics shader with creamy waves transparency
Comics Draft
Draft painted cartoon shading with a glassy look
Comics Fading
Cartoon paint style with some fading at the edges
Contour Emboss
Satiny and embossed contour effect
Deep Chrome
Dark chrome effect
Deep Metal
Deep and dark metal shading
Emboss Shader
Combination of satiny and emboss effect
Frosted Glass
Satiny glass effect
Opaline
Contouring version of smooth shader
Refractive Glass
Double reflection through glass with some refraction
Sharp Deco
Unrealistic reflections with sharp edges
Sharp Metal
Chrome effect with darkened edges
Overlays
Alpha Monochrome Cracked
Basic noise fill texture; adjust color in Flood
Alpha Turbulent
Basic noise fill texture; adjust color in Flood
Barbed Wire
Gray bevelled wires with drop shadows
Blue Cheese
Marble-like bluish speckles
Canvas Transparency
Gives a canvas like HSL sensitive transparency.
Carnaval
White splotches evocating carnaval masks
Clouds
Airy, fluffy, sparse white clouds
Colorize Turbulent
Basic noise fill texture; adjust color in Flood
Cross Noise
Adds a small scale screen like graininess
Cross Noise B
Adds a small scale crossy graininess
Dots Transparency
Gives a pointillist HSL sensitive transparency
Duotone Turbulent
Basic noise fill texture; adjust color in Flood
Frost
Flake-like white splotches
Garden of Delights
Phantasmagorical turbulent wisps, like Hieronymus Bosch's Garden of Delights
Growing Cells
Random rounded living cells like fill
Light Eraser Cracked
Basic noise fill texture; adjust color in Flood
Liquid
Colorizable filling with liquid transparency
Oil Slick
Rainbow-colored semitransparent oily splotches
People
Colorized blotches, like a crowd of people
Poster Turbulent
Basic noise fill texture; adjust color in Flood
Rough Transparency
Adds a turbulent transparency which displaces pixels at the same time
Rubber Stamp
Random whiteouts inside
Scotland
Colorized mountain tops out of the fog
Shaken Liquid
Colorizable filling with flow inside like transparency
Silhouette Marbled
Basic noise transparency texture
Smear Transparency
Paint objects with a transparent turbulence which turns around color edges
Speckle
Fill object with sparse translucent specks
Swiss Cheese
Random inner-bevel holes
Tartan
Checkered tartan pattern
Tartan Smart
Highly configurable checkered tartan pattern
Tiger Fur
Tiger fur pattern with folds and bevel around the edges
Wavy Tartan
Tartan pattern with a wavy displacement and bevel around the edges
Zebra
Irregular vertical dark stripes (loses object's own color)
Pixel Tools
Pixellize
Reduce or remove antialiasing around shapes
Protrusions
Chewing Gum
Creates colorizable blotches which smoothly flow over the edges of the lines at their crossings
Dripping
Random paint streaks downwards
Fire
Edges of object are on fire
Ink Bleed
Inky splotches underneath the object
Ridges
Dragee
Gel Ridge with a pearlescent look
Glowing Bubble
Bubble effect with refraction and glow
Matte Ridge
Soft pastel ridge
Metallized Ridge
Gel Ridge metallized at its top
Refractive Gel A
Gel effect with light refraction
Refractive Gel B
Gel effect with strong refraction
Thin Membrane
Thin like a soap membrane
Scatter
Air Spray
Convert to small scattered particles with some thickness
Cubes
Scattered cubes; adjust the Morphology primitive to vary size
Leaves
Leaves on the ground in Fall, or living foliage
Pointillism
Gives a turbulent pointillist HSL sensitive transparency
Shadows and Glows
Cutout Glow
In and out glow with a possible offset and colorizable flood
Dark and Glow
Darkens the edge with an inner blur and adds a flexible glow
Emergence
Cut out, add inner shadow and colorize some parts of an image
In and Out
Inner colorized shadow, outer black shadow
Inset
Shadowy outer bevel
Textures
Bark
Bark texture, vertical; use with deep colors
Blotting Paper
Inkblot on blotting paper
Burst
Burst balloon texture crumpled and with holes
Cracked Glass
Under a cracked glass
Crumpled Plastic
Crumpled matte plastic, with melted edge
Felt
Felt like texture with color turbulence and slightly darker at the edges
Gouache
Partly opaque water color effect with bleed
Ink Paint
Ink paint on paper with some turbulent color shift
Jam Spread
Glossy clumpy jam spread
Melted Rainbow
Smooth rainbow colors slightly melted along the edges
Organic
Bulging, knotty, slick 3D surface
Riddled
Riddle the surface and add bump to images
Rough Paper
Aquarelle paper effect which can be used for pictures as for objects
Rough and Glossy
Crumpled glossy paper effect which can be used for pictures as for objects
Silk Carpet
Silk carpet texture, horizontal stripes
Stone Wall
Stone wall texture to use with not too saturated colors
Tinted Rainbow
Smooth rainbow colors melted along the edges and colorizable
Warped Rainbow
Smooth rainbow colors warped along the edges and colorizable
Watercolor
Cloudy watercolor effect
Wax Print
Wax print on tissue texture
References
- inkscape.org
- filters.svg, inkscape
- "Applying SVG effects to HTML content", MDN