PaintbrushJS Playground

Basic Blur

<img src="bee.jpg" width="200" height="133" class="filter-blur">

Blur Value 5

<img src="jordan.jpg" width="200" height="133" class="filter-blur" data-pb-blur-amount="5">

Basic Greyscale

<img src="leaves.jpg" width="200" height="133" class="filter-greyscale">

Greyscale Value 0.5

<img src="leaves.jpg" width="200" height="133" class="filter-greyscale" data-pb-greyscale-opacity="0.5">

Basic Mosaic

<img src="staples.jpg" width="200" height="133" class="filter-mosaic">

Mosaic Size 12, Opacity 0.5

<img src="louvre.jpg" width="200" height="133" class="filter-mosaic" data-pb-mosaic-amount="15" data-pb-mosaic-opacity="0.5">

Basic Noise

<img src="lighthouse.jpg" width="200" height="133" class="filter-noise">

Noise Amount 100, Type Colour

<img src="stones.jpg" width="200" height="133" class="filter-noise" data-pb-noise-amount="100" data-pb-noise-type="colour">

Basic Posterize

<img src="bee.jpg" width="200" height="133" class="filter-posterize">

Posterize Amount x

<img src="jordan.jpg" width="200" height="133" data-pb-posterize-amount="3" data-pb-posterize-opacity="0.4" class="filter-posterize">

Basic Sepia

<img src="sign.jpg" width="200" height="133" class="filter-sepia">

Sepia Value 0.5

<img src="leaves.jpg" width="200" height="133" class="filter-sepia" data-pb-sepia-opacity="0.5">

Basic Tint

<img src="staples.jpg" width="200" height="133" class="filter-tint">

Tint Colour #0066CC, Opacity 0.1

<img src="louvre.jpg" width="200" height="133" class="filter-tint" data-pb-tint-colour="#0066CC" data-pb-tint-opacity="0.1">