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

Manage dynamic content with the Webflow CMS

Learn how to create, manage, and display dynamic content across your site using the Webflow CMS.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

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.

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.

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.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Other glossary terms

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

Abstraction

→
In object-oriented programming (OOP), abstraction conceals irrelevant details so they don’t interfere with the task at hand.

Rich text element

→
Allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

Map

→
A Webflow element that embeds an interactive Google Map in your site.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Java

→
Java is an object-oriented programming language for building dynamic, interactive web applications across platforms

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

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.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Hypertext transfer protocol secure (HTTPS)

→
Hypertext Transfer Protocol Secure (HTTPS) is a secure protocol facilitating encrypted exchanges of information between web browsers and servers.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Class

→
A class is a template that defines variables for objects with similar properties.

Web server

→
A web server is a computer program or hardware device that delivers web content to clients using HTTP. It handles client requests for web pages, images, and videos.

SCA and PSD2 Regulations

→
Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019. Read more about how to make your ecommerce store compliant in our Payment gateway article.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Maximum width (max width)

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

Resource Description Framework (RDF)

→
The Resource Description Framework (RDF) is a standardized framework developed by the World Wide Web Consortium (W3C) that facilitates automated data exchange between web systems and applications.

Last updated

→
The last time someone made a change to your site.

Buffer

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

HyperText Markup Language (HTML)

→
A standard markup language that web browsers use to display websites.

Compile

→
Compiling is the process of converting code from a high-level programming language into a low-level language that computers can understand.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

Read-only link

→
A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Display: grid

→
The display: grid CSS property defines a website element (such as a button or header) as a grid container.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

UI state

→
The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Footer

→
A footer is a section at the bottom of a web page.

Cascading rules

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

CRUD

→
CRUD stands for Create, Read, Update, and Delete — the four basic operations all software applications should perform.

Basic section

→
A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

Select field

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

Compile time

→
Compile time is the length of time it takes for a compiler to convert high-level code into low-level code.

Duplicate element

→
To copy an element and its content, styles, and settings.

Collection list

→
A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

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.

Form block

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

Pagination settings

→
Through the pagination settings, you can preview Collection list pages by choosing the page number from the page dropdown list, or you can switch to the previous or next page using the arrow keys.

Navigator

→
A navigator, or a navigator window or panel, is a graphical user interface (GUI) that provides an overview of a website's structure and layout.

Meta title

→
A meta title is an HTML element that defines a web page's title and appears in browser tabs and search snippets on search engine results pages (SERPs) as a clickable headline.

Dynamic element

→
Dynamic elements are web page components that can change based on user interaction or external factors, like a live news feed, without requiring a page refresh or reload.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Webflow Support

→
The place to go when you need help using Webflow.

JSON

→
JSON, short for JavaScript Object Notation, is a human-readable, lightweight format for recording, storing, and exchanging data.

Dashboard

→
From your Dashboard, you can access, create, and manage all your sites.

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

Element settings panel

→
The second panel on the right side of the Designer. Here, you can change element-specific settings such as the element ID, Custom attributes, Search index settings, Editor settings, etc. You can learn more about the element settings for a specific element by searching for the element’s name on Webflow University.

Cookie

→
Cookies are small text files sent by a website to a user’s web browser that enhance their browsing experience by remembering site preferences and activities.

Typography section

→
A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

Width

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

Pseudocode

→
Pseudocode is a simplified, informal representation of programming code that outlines a program’s structure and logic without strict syntax.

DHTML

→
DHTML, or Dynamic HTML, is a web-development technique combining HTML, CSS, and JavaScript to create dynamic, interactive web pages and complex web applications.

Inheritance dropdown

→
A dropdown menu that displays all the selectors that affect a given element.

Flexbox

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

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Meta description

→
An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often display this in results pages (SERPs).

Strong text

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

Cryptanalysis

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

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Child

→
A child element is an element nested within a parent element in a hierarchy.

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.

Text link

→
A typography element that is used to link to other pages or sections of a webpage.

IP address

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

Editor toolbar

→
The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

End user

→
An end user is an individual or group who directly interacts with a particular product, service, or user interface (UI), such as a website or application.

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Delete element

→
To remove an element and its content from your website.

Left margin

→
Left margin is a CSS property that defines the space between an element's left edge and its surroundings.

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).

Beacon

→
A beacon — also called a web beacon or web bug — is an HTML-embedded object that tracks user behavior on a web page.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Content-first design

→
A design approach that prioritizes content planning and production in the design process.

Bottom bar

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

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

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.

Behavioral targeting

→
Behavioral targeting is a marketing technique that leverages user data to deliver personalized ads to drive conversions.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Workspace

→
A space to hold and access sites, members, settings, and integrations. All users start with a Workspace that can become collaborative when and as needed.

Latency

→
Network latency is the time data needs to travel from one point to another, impacting the responsiveness and speed of web applications and services.

Help text

→
Help text is a user interface design element that provides additional information or guidance to users to clarify which content should go in a given Collection field.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

Div block

→
A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

Image field

→
Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

URL redirect

→
URL redirect, or URL forwarding, is a web server function that automatically sends users from one web address to another.

Single Instruction Single Data (SISD)

→
Single Instruction and Single Data Stream (SISD) is a computer architecture where a central processing unit (CPU) executes one instruction at a time on a single data piece.

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.

Publish site

→
The act of updating your live site to reflect new design changes.

Search Engine Optimization (SEO)

→
Search Engine Optimization (SEO) is a collection of strategies to enhance a website’s ranking and visibility on search engines.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Target

→
The currently selected element.

Homepage

→
The page people see when they visit your site's root domain. Read more about the homepage.

Hit

→
A hit is a request to a web server from a browser for a specific resource.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more