---
title: "Applying CSS3 filters"
date: "2019-01-31T09:19:08+00:00"
summary: "Enhance your web design with CSS3 filters. Learn how to apply and customize visual effects like blur, contrast, and saturation to create stunning, dynamic elements on your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/applying-css3-filters"
id: "b42fdecc-b349-411c-b283-3ad419d495f4"
---

Table of contents will be added

You can add CSS filters to your element styles, find out more about [CSS filter properties](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).

Important

The filter property is not supported in IE11 but is supported in Edge and all other modern browsers.

Adding a filter property to a style
-----------------------------------

To add a filter property:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Properties** button
3.  Then select **Filter** in the menu.

Filter
------

### Expected values

*   Set a filter type, by selecting an option in the **type field.**

For example:

![69449d18-filter.png](https://acquia.widen.net/content/5ddb88e8-7c6b-4cd5-84c9-76f8a68001f1/web/69449d18-filter.png)

Once a filter has been selected other conditional fields will appear. 

For example:

![f164d5ce-filter-additional-options.png](https://acquia.widen.net/content/a54c1c99-c1ad-44f7-a714-a556ff888c95/web/f164d5ce-filter-additional-options.png)

Add multiple filter properties
------------------------------

To add additional Filter properties to the same style:

1.  Below the Filter property fields, click **Add Filter**
2.  A new row of fields will be added to the form
3.  Set a filter type in the **Type field**
4.  Add additional values in conditional fields
5.  Repeat this process to add additional Filter properties.

![8ff279df-filter-add-multiple.png](https://acquia.widen.net/content/128700d9-3453-480e-a784-00190ae254c1/web/8ff279df-filter-add-multiple.png)

Remove filter properties
------------------------

To remove Filter properties from the style:

1.  Above the Filter property fields, click the grey **Delete icon**
2.  The property will be removed.

![75c061c3-filter-remove.png](https://acquia.widen.net/content/015a3504-02f9-4938-accf-e4ab9f0a61ba/web/75c061c3-filter-remove.png)