CSS Filter Generator
Filter sliders with live preview, plus hex colour to CSS filter for icons.
About this tool
Move the sliders to apply blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia to the sample picture, or load your own image, which stays on your device. Copy the resulting CSS. Below, enter a hex colour and press Find filter to get a filter chain that turns black into that colour, shown side by side with the target and an accuracy rating.
How CSS filters work
The CSS filter property applies graphical effects to an element and everything inside it, in the order you list them. blur() softens by a radius in pixels; brightness() and contrast() scale lightness and tonal range, where 100% means unchanged; grayscale(), sepia() and invert() blend towards those effects up to 100%; saturate() strengthens or mutes colour; hue-rotate() turns every colour around the colour wheel by an angle; and opacity() fades the element. Filters are applied by the graphics card and can be animated with transitions. They're also a popular trick for recolouring icons that can't be edited, such as an SVG loaded with an img tag, a background image or a third-party logo. Starting from black, a combination of invert, sepia, saturate, hue-rotate, brightness and contrast can produce almost any colour. Finding the right values by hand is impractical, so the solver uses a randomised optimisation to search for a chain whose result matches your colour; the loss figure shows how close it got, and anything under about 5 looks identical. Honest limits: the colour trick assumes the source is black, so add brightness(0) first for other colours, and it also tints anti-aliased edges. For inline SVG, setting fill or using currentColor is simpler and exact. Heavy blur can be slow on large areas. The photo filters tool edits and saves images, the colour converter converts colour formats and the text shadow generator styles headings.
Frequently asked questions
How do I change an SVG's colour with CSS filter?
If the icon is black, apply the filter chain the tool gives for your hex colour. For other colours, start the chain with brightness(0).
Does the order of CSS filters matter?
Yes. Filters are applied left to right, so the same functions in a different order can give a different result.
Can CSS filters be animated?
Yes. Use a CSS transition or animation on the filter property.
Is my image uploaded?
No. The preview image stays on your device and nothing is stored or sent.