CSS Filters

The Filter Attribute

This one is simply used to put a filter on an element. The function has lots of choices when comes to picking a filter. Here are examples, what you can use (using built-in HTML styling):

These are the main known filters.

Frosted Blur

The froested blur (also known as glassmorphism) is a beautiful effect used in modern websites. You might have also seen it in tutorial videos:

Applying this style to your website's elements, you are keeping up with modern days.

Full Page with Frosted Blur

An example of a modern-looking page:

Themes like these are most common in home pages.

Background Blurred Navbar

An instance of a navbar, that has blurred background (its much more noticeable when you use an image for it instead):

Blur filters are less used for navbars, since they need to be visible enough to catch users attention. So make sure you use strong border and vivid colors if you are blurring navbar background.

Another example of Glassmorphism

Here's a grid layout that has a glass effect along with a blurred background image:

This example is good for making information, home, services page.