CSS Filter & Backdrop Filter Playground

CSS filters let the browser adjust how an element is drawn: blur it, make it greyscale, push the contrast, shift the hue. They work on images, but also on any element, and they are cheap to animate, which makes them the standard way to build hover effects, dimmed disabled states and frosted glass. The difficulty is knowing what each percentage does to your own picture. This page shows the result as you drag, and writes only the functions you changed.

The functions

brightness() scales light, with 100% unchanged and 0% black. contrast() stretches differences around mid-grey. saturate() raises or lowers colour intensity, and 0% is greyscale. grayscale() and sepia() mix toward those looks from 0 to 100%. hue-rotate() turns every colour around the colour wheel by an angle. invert() swaps light and dark. opacity() fades, and blur() softens by a radius in pixels. drop-shadow() draws a shadow that follows the shape of the drawn pixels, including a transparent PNG, which box-shadow cannot do because it always follows the rectangle.

A worked example

Press Sample for a warm, punchy photo: contrast 115%, saturate 140%, sepia 20% and hue-rotate 12 degrees. The page writes filter: contrast(115%) hue-rotate(12deg) saturate(140%) sepia(20%);. The functions that stayed at their neutral value, such as brightness and blur, are not in the list. With the switch on backdrop-filter the same functions are written as two lines, -webkit-backdrop-filter: ...; first, then backdrop-filter: ...;. Turn on drop-shadow() and the default shadow is drop-shadow(4px 4px 6px #00000066).

Order matters

A filter list is applied left to right: each function works on the result of the one before. Brightness followed by contrast is not the same picture as contrast followed by brightness, and sepia before hue-rotate gives a different tint from the reverse. The page writes the functions in a fixed order, so if you need a different order for a particular effect, copy the rule and reorder the functions by hand, then check the result.

filter and backdrop-filter

filter changes the element and everything inside it, including text and children. backdrop-filter changes only what is behind the element, and only shows through where the element is transparent. Frosted glass is a translucent background plus backdrop-filter: blur(...). The preview for that mode lays a translucent rounded panel over the picture. Both properties create a stacking context, which can change how position: fixed children behave.

Edge cases

Large blur radii on big areas are expensive to paint, especially while scrolling, so keep them on small elements or avoid animating them. Blur also pulls in colour from the edges, producing a soft halo at the border of an image; clip the container with overflow: hidden if that matters. Filters affect contrast ratios of text, so recheck legibility after dimming or inverting.

Limits

The page produces CSS only and does not export the processed picture. It does not write SVG filters, url() references or custom shader effects. How a filter looks depends slightly on the browser’s colour handling. The uploaded preview image never leaves your computer.

Hover effects and state styling

A filter transitions smoothly, which makes it a quick way to build states without extra image files. A common pattern is a thumbnail that sits at grayscale(100%) and returns to full colour on hover with transition: filter 200ms ease, or a disabled button at opacity(60%) and saturate(40%). Copy the rule from this page into the base selector and write the hover selector with the changed numbers. Keep a visible focus style as well, because a colour change alone is not a signal that keyboard users can rely on.

Related tools

• Glassmorphism CSS Generator builds a complete frosted panel.
• Box Shadow Generator covers shadows of rectangles.
• Color Blindness Simulator shows how your colours look to different viewers.
• CSS Gradient Generator makes the backgrounds you filter.