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

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.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Other glossary terms

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

Video field

→
Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

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.

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.

Descendant selector

→
A descendant selector is a CSS (Cascading Style Sheets) selector that targets elements nested inside a parent element.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Common targets

→
All elements on the page targeted by the same selector.

Localization

→
Localization (l10n) involves adapting digital content and applications to meet a specific region or culture’s language and conventions.

Shim

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

CSS Filters

→
CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS).

Webflow branding

→
A visible “Made in Webflow” badge displayed in the bottom right corner of Webflow sites. Webflow branding also appears in the site’s HTML. Learn more about Webflow branding.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Null

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

Beacon

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

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

Entity

→
An entity is a representation of a special character that causes syntax conflicts in HTML (Hypertext Markup Language).

Map

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

Left toolbar

→
The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

Content-first design

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

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.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Right padding

→
The inside spacing between the right border of an element and the elements inside it.

Redo

→
To move forward one step while making changes to a Webflow site.

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Radio button

→
A radio button is a form element for selecting one option from a predefined set of mutually exclusive choices.

Minimum height

→
The min-height CSS property defines an element’s minimum height.

Wrapper

→
A wrapper is a programming language function for encapsulating and organizing elements within a well-defined interface.

Webflow Support

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

Dropdown

→
A dropdown, or dropdown menu, is a pre-built navigation element you can add to almost any part of a website.

Export

→
A downloadable ZIP file that contains your Webflow site's HTML, CSS, JS, and image files.

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.

Ligature

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

Unpublished change

→
A change that has been made in the Webflow Editor but will not appear on the live website until it’s published. You can track any unpublished changes on the bottom right of the Editor toolbar.

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

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

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.

Canvas

→
The <canvas> tag in HTML5 creates a container for dynamic graphics and image rendering on a webpage.

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

Folder

→
A folder is a subdirectory of your site's root folder for organizing web pages.

Lightbox

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

Deprecated

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

Google site verification meta tag

→
Adding a Google site verification meta tag to your website's HTML code allows Google to verify that you own the site.

Maximum height (max height)

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

Micro conversion

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

Hit

→
A hit is a request to a web server from a browser for a specific resource.

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.

Meta keywords

→
Meta keywords are words or phrases you can include in your web page's metadata.

Height: auto

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

Inline style

→
Inline style applies CSS to an individual HTML element using the "style" attribute within the HTML tag.

Plain text field

→
A plain text field is an input field for short-form text without formatting or styling.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Typography

→
A section in the Add panel that houses typography elements such as headings and paragraphs.

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.

SaaS

→
Software as a Service (SaaS) is a cloud-based approach to delivering software on a subscription basis without requiring local installation.

Prefetch

→
Prefetch is a technique that proactively loads and caches resources to improve website performance and user experience.

Designer

→
The main interface where you can build sites.

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.

Optimization

→
Optimization is a systematic approach to improve a website's appearance, functionality, and visual appeal to enhance the user experience, improve search engine rankings, and achieve business objectives.

Bundling

→
Bundling, or bundle pricing, is a pricing technique in which retailers sell products together at a lower price than they would be sold at individually.

Blog

→
A blog, short for weblog, is a website or webpage where an individual or group regularly shares content about specific topics, typically in reverse chronological order.

Inheritance

→
Inheritance describes a principle where child elements adopt the style properties of parent elements.

Selector state

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

Total Form Submissions

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

Left padding

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

SVG (Scalable Vector Graphics)

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

Site plan

→
A Webflow plan that you can add/apply to individual sites. You’ll receive access to different site and hosting features based on your Site plan.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Text block

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

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Inheritance dropdown

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

Font weight

→
Font weight refers to the thickness or density of a typeface’s strokes.

Search Engine Optimization (SEO)

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

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

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.

ATAG

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

Page name

→
The title of a page in your site. This is visible in the Pages panel.

ASCII

→
The American Standard Code for Information Interchange (ASCII) is an encoding standard that assigns numerical values to characters and translates them into computer-readable code.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Homepage

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

JSON

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

Twitter button

→
A Webflow element that embeds a Twitter Follow or Tweet button into your site.

Robots.txt

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

Desktop breakpoint

→
A breakpoint, or media query, is the width at which a website’s design and layout adjust to fit screens of different sizes. When designing in Webflow, breakpoints for smaller devices inherit styles from the base — or desktop — breakpoint by default.

Content management system (CMS)

→
A content management system (CMS) is a tool for creating and managing a website and its content.

Subdomain indexing

→
When a search engine crawls your site's Webflow subdomain (e.g., your-site.webflow.io).

SSL CDN

→
SSL CDN, or Secure Sockets Layer Content Delivery Network, is an option that allows you to serve your images over your own CDN service while using SSL.

Mutable

→
In JavaScript, mutable objects are dynamic elements that allow post-creation changes and modifications.

Comparison shopping engine

→
A comparison shopping engine (CSE) is a search engine that compares ecommerce pricing, shipping costs, and customer reviews.

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.

Made in Webflow

→
Made in Webflow showcases Webflow sites made by individuals and teams.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

Document type definition (DTD)

→
A document type definition (DTD) defines the structure, validity, and attributes of standard generalized markup language (SGML) documents, such as GML, HTML, and XML.

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more