Layers » Filters and effects

Filters and effects

There are several graphic effects that you can apply to a layer’s contents. They work on all layers, including video layers.

Framer’s filters applied to different kinds of layers

Download Framer project

Note that you can set the values for the filters when editing a layer (or layer animation). They’re in the bottom part of the Properties Panel.

Since the ‘Framer Effects’ update, they can now also be applied in Design.


Adds a Gaussian blur to the layer. The default value is 0: no blur.

layer.blur = 10

Background blur

Adds a blur to the layers underneath the layer. The default value is 0: no blur.

Note that this may not work in every browser, and can produce rendering artifacts.

layer.backgroundBlur = 10


Will brighten or darken a layer. The default value is 100. Setting it to 0 will make your layer completely black. There’s no upper limit.

layer.brightness = 120


Sets the contrast of a layer. The default value is 100. The lowest possible value, 0, means ‘no contrast,’ and will result in an even, gray layer.

Any value above 100 will add contrast. There’s no upper limit.

layer.contrast = 120


The default value is 100, so setting it to 0 will make everything in the layer grayscale. Values above 100 will intensify the colors.

layer.saturate = 150


Will convert all colors to gray. The default value is 0 and setting grayscale to 100 will remove all color. (The same result as layer.saturate = 0.)

layer.grayscale = 100


Shifts the hue of all the colors in a layer. Hue rotation is defined in degrees between 0 and 360, the default value is 0.

360º will give a full rotation, appearing the same as 0º.

layer.hueRotate = 180


Inverts all color and brightness values of a layer.

The default value is 0, while setting it to 100 will replace all hues with their complementary colors. (Like doing an ‘Invert’ in Photoshop.)

At 50, everything will meet in the middle, which results in an even, gray layer.

layer.invert = 100


Will add a sepia tone to your layer; the maximum value is 100.

layer.sepia = 50
A project with an image to test the different filters on
Download Framer project