University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
CSS Filters

CSS Filters

CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS). CSS filters enable the application of a range of image processing techniques to the content and background of an element. 

You can combine multiple CSS filters to manipulate an element’s rendering. Here are a few of the CSS filters available in Webflow:

  • Blur — applies a Gaussian blur, making it appear out of focus
  • Grayscale — converts to grayscale, removing all color
  • Sepia — applies a sepia tone, giving it a vintage look
  • Brightness — adjusts the luminosity

Filters benefit state changes, such as transitioning an image from grayscale to color when a user hovers over it. You can also use backdrop filters to add depth with dynamic blurring and color effects on the area behind the elements.

Visit Webflow University for lessons on CSS filters, backdrop filters, and CSS.

Relevant courses

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Select field

→
A form element that allows you to make a selection in a dropdown list.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Percent

→
A measurement unit relative to an element's parent.

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Graphical User Interface (GUI)

→
A Graphical User Interface (GUI) is a visual medium that enables visual interaction with software applications or electronic devices through elements like icons, buttons, and menus.

Key

→
A key, or web key, is a unique identifier that authorizes access to a webpage or service.

Site

→
What you create in Webflow! You can publish sites to a webflow.io staging subdomain for free, export the code on a paid plan, add hosting on any paid plan, or add a Site plan to any site to connect your custom domain and unlock hosting features.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

Total asset size

→
The total weight of your site's HTML, CSS, JS, and images.

Right-side panel

→
The far right vertical panel in the Designer that houses the Style panel, Element settings panel, Style manager panel, and Interactions panel.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

Strong text

→
The <strong> element defines important text with added semantic importance.

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

Object-oriented programming (OOP)

→
Object-oriented programming (OOP) is a programming approach that organizes code into self-contained units of data, functions, and behavior.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Domain-Specific Language (DSL)

→
A Domain-Specific Language (DSL) is computer script that solves software problems in a specific domain.

Bad neighborhood

→
Bad neighborhoods are groups of websites that search engines have downgraded because they violate search engine guidelines.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

Tablet breakpoint

→
A Webflow canvas setting for creating styles that affect viewports with a minimum width of 768px and a maximum width of 990px. Also known as the tablet media query.

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

Shared Workspace template

→
Shared Workspace templates are templates made from your own sites. They can help you create sites with similar layouts and increase your efficiency when designing. Your Workspace members will also have access to your shared Workspace template(s).

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Sibling

→
An element that shares the same parent of another element.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Save

→
The Designer automatically saves your progress every 10 seconds.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Node title

→
The type of element you're working with, i.e., H1, link, button, etc.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Domain name forwarding

→
Domain name forwarding is a process that automatically redirects visitors from your domain name to a different web address.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Bug

→
A bug is an error, fault, or flaw in an application or software that causes the program to behave unexpectedly, often producing inaccurate and invalid output.

BigInt

→
BigInt, which stands for “big integer,” is a JavaScript data type. JavaScript uses data types to decide how to treat a piece of data.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Folder settings

→
Allows you to manage your folders.

Free plan

→
The perfect Webflow subscription for getting started, giving you access to all Designer features, so you can start building a site right away.

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Image

→
A Webflow element that displays graphical files on your website.

Collection limits

→
By default, Collection lists display all items in a Collection, but you can add limits to control the number of Collection items that display.

Date/Time field

→
A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

Attribute

→
An attribute in HTML is a term inside an opening tag of an element, such as a font or color, that provides additional information about the element.

Maximum width (max width)

→
The “max-width” CSS property defines an element’s maximum width.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

Text block

→
A typography element that is used when no other element is specifically suitable.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Rich text field

→
A rich text field is an input tool for formatting or applying text styles, such as bold, colors, font sizes, italics, underline, and other visual modifications.

Last published

→
The last time your site was published.

Micro conversion

→
Micro conversions are small but important user actions on a website that contribute to the overall conversion funnel.

Webflow Editor

→
Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

A/B testing

→
A/B testing compares two different versions of something — like a web page or campaign — to determine which performs better.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Video

→
A Webflow element that displays externally hosted videos such as YouTube and Vimeo.

Domain

→
A domain, or domain name, is the unique address that directs to a website on the internet.

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

Head code

→
Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

Cloneable site

→
Cloneable sites are open source (made available under the CC0 (“no rights reserved”) license). When you enable cloning, you allow any user to copy, modify, and use any part of your site for personal or commercial purposes.Sites with cloning turned off do not give others access to copy your site or open it in the Designer.

Height

→
Defines how tall an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Webflow CMS

→
Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Form submission

→
When someone sends data through one of your site's forms.

Container

→
An element that contains content.

Multi-reference field

→
A CMS field used in Collections. Just like a reference field, the multi-reference field lets you reference other Collections in your site. But it’s even more powerful, as it lets you reference multiple items within a Collection instead of just 1 item.

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more