Set the amount for each filter function and get a single filter line to paste onto an image, a video or any other element. Only the values you change are written, in the same order every time, so the code stays short. This page does not show your picture, so the guide describes what each function does to an image and where the values usually sit for common looks.
Brightness multiplies every colour value, so 50% is a darker copy and 150% is a lighter one, clipping to white. Contrast pushes values away from mid grey when it is above 100% and pulls them toward grey when below. Saturate scales the strength of colour: zero is grey, and values above 100% make colours more vivid.
Grayscale and sepia blend the picture toward a grey or a brown tone by the given amount. Invert flips the colours like a photographic negative. Hue-rotate spins every colour around the colour wheel by the angle, which is a quick way to recolour an illustration, and 180 degrees swaps each colour for its opposite.
Filters let you restyle one image in several ways without making new files. A row of client logos can be shown in grayscale at 60% opacity and bloom to full colour on hover, which keeps a busy page calm. A hero photo can be darkened with brightness so white text stays readable on top.
Be careful with filters on text and thin lines, because blur and other effects soften the edges. Also check what happens with print and high contrast modes, where your colour choices may be overridden. Do not use a filter as the only way to show a state such as selected or disabled.
A CSS filter applies a visual effect to an element and everything inside it when the browser draws it. The original image file is not changed. You can chain several functions in one filter property, separated by spaces.
Brightness, contrast, saturate, grayscale, sepia, invert and opacity are percentages where 100% means no change for brightness, contrast, saturate and opacity, and 0% means no change for grayscale, sepia and invert. Blur is a radius in pixels, and hue-rotate is an angle in degrees around the colour wheel.
Filter changes the element itself. Backdrop-filter changes whatever is behind the element, which is how frosted glass panels are made. Choose both to write the same functions for each property.
Box-shadow follows the rectangular box. The drop-shadow function follows the visible shape of the image, so a logo with a transparent background gets a shadow around the logo itself and not around its empty corners.
A single static filter is cheap. Large blurs on big areas, or on elements that animate or scroll, make the browser do much more work, so keep blur radii small and avoid stacking many filtered layers on a phone.
Related: CSS shadow generator, Image compressor, Colour palette from image.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.