Filters let you visually modify an element or the content behind it without editing the original image or design. You can use filters to create blur effects, adjust brightness, increase contrast, apply grayscale styling, and more.

Types of Filters

Kirki provides two filter types:

• On Element – Applies the effect directly to the selected element.

• On Backdrop – Applies the effect to the content behind the selected element.

Add a Filter On Element

1. Select the element you want to style.

2. Go to the Design tab in the Right Panel.

3. Under Style, click the plus (+) icon.

4. Select Filters.

A filter layer will be added to the selected element, allowing you to apply visual effects directly to it.

Add a Filter On Backdrop

1. Select the element you want to style.

2. Go to the Design tab in the Right Panel.

3. Under Style, click the plus (+) icon.

4. Select Backdrop Filters.

A filter layer will be added to the selected element, allowing you to apply visual effects to the content behind it.

💡 Tip: Backdrop filters are most effective when the element has some level of transparency, allowing the filtered background to remain visible.

Filter Controls

Both filter types provide the same set of controls.

Opacity

Controls the visibility of the filter effect. 

Lower values reduce the effect’s visibility, while higher values make it more prominent.

Blur

Applies a blur effect. The higher the value, the stronger the blur.

Brightness

Adjusts how light or dark the content appears.

Values above 100 increase brightness, while values below 100 decrease brightness.

Contrast

Controls the difference between light and dark areas.

Higher values create a stronger contrast, and lower values create a flatter appearance.

Saturation

Adjusts color intensity.

Higher values make colors more vibrant, and lower values reduce color intensity.

Invert Color

Inverts the element’s or backdrop’s colors.

At maximum values, colors are displayed as their opposite tones.

Grayscale

Removes color from the content.

0 equals full color, while 100 makes the content go completely grayscale.

Hue Rotate

Shifts colors around the color spectrum.

This can create dramatic color variations while preserving the original image details.

Sepia

Applies a warm, vintage-style color treatment. Higher values produce a stronger sepia effect.

Edit a Filter

To modify an existing filter:

1. Select an element on the page.

2. Locate and select an existing Filter (or Backdrop Filter) layer under the Style section on the Right Panel.

3. Adjust the filter controls as needed.

Changes are applied instantly on the canvas.

Remove a Filter

To remove a filter:

1. Select the element on the page.

2. Locate the Filters property in the Style section.

3. Click the minus (-) icon beside the filter.

The filter will be removed immediately from the selected element.