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.

Blur

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

Brightness

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

Contrast

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

Saturation

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

Grayscale

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

Hue

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

Invert

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

Sepia

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