The filter: grayscale() function removes colour information from an element by converting each pixel to its luminance equivalent and applying that value uniformly across all three colour channels, effectively replacing chromatic information with a neutral grey at the same brightness.
Loading Filter Effects Builder…
Live preview of grayscale() from 0 to 1 including partial values
Preview muted palettes with partial grayscale values
Simulate colour-reveal hover transitions in the builder
Copy-ready filter declaration for your stylesheet
Drop the Filter Effects Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Filter Effects Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
The grayscale() function accepts both a number between 0 and 1 and a percentage between 0 percent and 100 percent as its argument. grayscale(0.5) and grayscale(50%) are exactly equivalent and produce identical rendered output. Values outside the valid range are clamped at the boundary: grayscale(1.5) is treated as grayscale(1) and grayscale(-0.2) is treated as grayscale(0). The decimal form is more compact in production code and matches the convention used by brightness(), contrast(), and saturate(), making it the more common choice when reading filter stacks at a glance. The percentage form is occasionally clearer when communicating the intent to designers who think in percentage terms during reviews. Both forms are valid in production CSS; the choice is purely a stylistic convention with no functional difference.
Partial grayscale between 0.2 and 0.7 produces a muted, desaturated palette that retains colour identity without full saturation, sitting between vivid and monochrome in a way that feels considered rather than accidental. This range is useful for secondary content, inactive states, alumni team photos, and gallery thumbnails that should not compete visually with the primary focused element. At grayscale(0.3), colours retain most of their hue character but appear more conservative and less vivid, suitable for understated content treatments. At grayscale(0.6), colours are noticeably washed out and the overall palette reads as subdued. These intermediate values are often more visually sophisticated than either full colour or complete greyscale, making them worthwhile for editorial and portfolio design where consistent restraint matters.
The colour reveal hover pattern applies full or partial grayscale at rest and transitions to no filter or zero greyscale on hover, providing satisfying interactive feedback as users move through a gallery. The CSS pattern is straightforward: transition: filter 0.3s ease on the element, filter: grayscale(1) as the resting state, and filter: grayscale(0) in the :hover rule. The transition duration of 0.3s reads as responsive without feeling abrupt to most users. A longer transition of 0.5s to 0.6s works better for large full width images where a slower reveal emphasises the colour payoff and gives the eye time to register the change. Stacking grayscale with brightness(0.9) at rest and removing both on hover creates a more dramatic reveal by combining desaturation with slight darkening that emphasises the colour emergence.
Greyscale filters interact predictably with screen reader and assistive technology because they only affect visual rendering and leave the underlying DOM, alt text, ARIA attributes, and semantic structure entirely untouched. However the visual change does have accessibility implications worth considering before applying greyscale broadly to UI. Removing colour from interactive elements eliminates one of the channels through which information can be conveyed, which can be a problem if your interface relies on colour to distinguish state such as a red error icon versus a green success icon. WCAG guidance recommends never relying on colour alone to convey information regardless of filter use, so a properly designed interface should remain functional in greyscale, but it is worth auditing your specific UI before applying greyscale at a container level to confirm no critical semantics are lost.
Drag the grayscale slider from 0 (full colour) toward 1 (full greyscale). Pause at values like 0.3, 0.5, and 0.7 to observe partial desaturation. Copy the generated filter when the colour muting matches your design intent.
Step-by-step guide to css grayscale filter generator:
Add grayscale() to the filter builder
Select the grayscale function from the function panel in the builder. The preview starts at value 0 showing the element in full original colour, with the slider positioned at the leftmost end of its range. This baseline lets you compare every subsequent slider position against the unfiltered original without needing to mentally reset between adjustments while iterating toward your target effect.
Drag the slider toward 1
Move the slider rightward to progressively increase desaturation toward full greyscale. Pause at intermediate values such as 0.3, 0.5, and 0.8 to observe the partial greyscale effects and find the level that matches your design intent. The live preview updates continuously as you drag, and the numeric value displayed alongside the slider can also be typed directly for exact target values.
Stack additional filters if needed
Add brightness() or contrast() functions to the filter stack to combine greyscale with tonal adjustments such as a darkened resting state or boosted contrast for a graphic monochrome treatment. The function order in the stack affects the final rendered result because each function operates on the pixel output of the previous one, so reordering is a meaningful tuning lever.
Copy and apply with transition
Copy the generated CSS declaration into your stylesheet on the target element or component class. Pair it with transition: filter 0.3s ease in the base rule and add a :hover or modifier class with filter: grayscale(0) to produce a smooth colour reveal effect on user interaction. The transition duration can be increased to 0.5s for larger images where a slower reveal feels more deliberate.
Common situations where this approach makes a real difference:
Photography portfolio colour-reveal gallery
A photographer uses greyscale thumbnails at rest as a deliberate design choice that makes the gallery feel editorial and cohesive despite the varied colours of the individual photographs. Each thumbnail has filter: grayscale(1) brightness(0.9) at rest and filter: grayscale(0) brightness(1) on hover with a 0.35s ease transition between them. The generator helps tune the resting brightness value carefully so the greyscale thumbnails read as intentionally darkened and styled rather than appearing unprocessed or accidentally missing colour information, completing the editorial gallery impression.
Inactive navigation section markers
A multi section dashboard applies filter: grayscale(0.7) to section header icons when their corresponding sections are not the currently active view. The partial greyscale retains enough residual colour for users to identify each icon at a glance while visually de emphasising it relative to the active section. The active section icon has no filter applied at all. The generator confirms that 0.7 is the right threshold for this UI: lower values still look too colourful for an inactive state, higher values strip too much identity from the icons and make navigation slower.
Loading skeleton with greyscale photo placeholder
Before images load from the network, a developer applies filter: grayscale(1) brightness(1.1) to image containers that show a low resolution blur placeholder generated from the image metadata. When the full image loads and the loaded class is added by JavaScript, a CSS transition removes the filter and reveals the full colour image smoothly. The slight brightness lift on the placeholder makes it feel more like an active styled loading state than a missing or broken image, improving perceived performance during slow network conditions for users on mobile data.
Monochrome brand theme for a memorial page
A developer builds a memorial or in memoriam page that requires all images and visual content to render in respectful black and white as a deliberate design choice. They apply filter: grayscale(1) to the main content wrapper element, which converts all photographs and coloured graphics on the page to greyscale without modifying any underlying image files. The single CSS rule covers all current and future images added by the CMS team, so editors can publish new content without needing to manually convert images to greyscale before upload.
Get better results with these expert suggestions:
Partial grayscale as a visual hierarchy tool
In image heavy layouts such as portfolio grids or news landing pages, apply filter: grayscale(0.6) to secondary images and keep the primary feature image at grayscale(0) for full colour. The desaturated secondary images recede visually and let the eye settle on the primary feature without changing layout dimensions or element sizes. Remove the grayscale filter on hover for the secondary images to provide equal access to full colour detail on user interaction, so users browsing the grid can still inspect any item in full colour by simply moving the cursor over it.
grayscale(1) with contrast(1.3) for bold monochrome graphics
Stacking filter: grayscale(1) contrast(1.3) converts photographic content to high contrast black and white, similar in feel to dramatic high contrast film photography or Avedon style portraiture. This combination is effective for background images placed behind white text headlines where the contrast helps the text remain legible, for editorial visual treatment that needs a strong graphic identity, and for making colourful photographs from different sources feel consistent within a monochrome design system that values restrained presentation across diverse content.
Use CSS custom properties for consistent grayscale states
Define --img-desaturate: grayscale(0) on a component root and reference it as filter: var(--img-desaturate) in the component rule. In a .themed or .monochrome variant class, override the variable to --img-desaturate: grayscale(1). This pattern lets you toggle all images in a section between colour and greyscale from a single variable change without modifying individual element rules scattered across the stylesheet. It also makes the desaturation state inspectable and tunable directly in browser DevTools during design exploration, which speeds up prototyping.
Test grayscale on coloured UI components, not just photos
A filter: grayscale(1) applied to a container affects all children including buttons, icons, and any coloured text inside the container. Coloured UI components lose their semantic colour coding in greyscale, meaning a red error state and a green success state may appear identical to users when the filter is active and the only visual difference is hue. Test greyscale filter on full component compositions including form fields, status indicators, and notification elements, not just simple image previews, to catch lost colour semantics before the change ships to production where it can confuse users.
Use grayscale(1) for print media queries
In a @media print block, applying filter: grayscale(1) to photographs saves ink on colour printers and produces cleaner output on black-and-white printers. Add it to img elements or a body rule scoped to the print media query.
Combine grayscale with opacity for inactive states
filter: grayscale(1) opacity(0.6) produces a clearly inactive appearance for UI components. The greyscale removes colour distinction and the opacity reduction further reduces visual weight. This combination works across image and icon content without needing separate inactive-state assets.
Animate from grayscale(1) to grayscale(0) for content reveal
A page load animation that transitions all images from grayscale(1) to grayscale(0) over 0.6s with staggered animation-delay values creates a sequential colour reveal effect that adds visual interest to content-heavy pages without requiring any image assets.
More use-case guides for the same tool:
Other tools you might find useful:
Open the full Filter Effects Builder — free, no account needed, works on any device.
Open Filter Effects Builder →Free · No account needed · Works on any device