The filter: brightness() function multiplies the luminance of every pixel in an element and its descendants by a single numeric factor applied uniformly across all three colour channels.
Loading Filter Effects Builder…
Live preview of filter: brightness() at any decimal value
Preview dimming, neutral, and overexposure ranges
Test brightness transitions on images with hover simulation
Copy-ready CSS declaration with one click
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 brightness() function accepts a number or a percentage as its argument. The number form is more common in production code because it is shorter and matches the syntax of saturate() and contrast(): brightness(0) renders the element as solid black, brightness(0.5) renders it at half luminance, brightness(1) is the identity value with no visible change, and brightness(2) doubles all luminance values, clipping pixels that exceed maximum white. Percentages map directly so brightness(50%) is equivalent to brightness(0.5). There is no upper limit defined in the CSS Filter Effects specification, though values above 3 or 4 typically produce nearly all white output for most content and lose all visual detail. The function applies uniformly to all three colour channels: it does not shift hue or saturation, only multiplies overall luminance.
Values above 1 are useful for emphasis and hover feedback on images. A product image grid where each thumbnail brightens from brightness(1) at rest to brightness(1.1) on hover communicates interactivity clearly without requiring a border ring, focus outline, or scale transform on the element. The effect is subtle at brightness(1.05) to brightness(1.15) and becomes noticeably over lit at brightness(1.4) and above where photographs begin to look unnatural. For a more saturated rather than simply brighter hover effect, combine brightness(1.05) with saturate(1.2) in the same filter stack: the brightness lifts the overall luminance while the saturation boost makes colours feel more vivid rather than washed out, producing a polished interaction that reads as deliberate rather than accidental.
For dimming effects, brightness values between 0.3 and 0.7 are the practical working range. Inactive states for image cards, overlay backgrounds behind modals, and disabled button icons commonly use brightness(0.5) to brightness(0.7) depending on how strongly inactive the state should read. Values below 0.3 approach solid black and lose too much detail to be useful for most UI contexts because the content underneath becomes unrecognisable. Combining brightness(0.6) with a CSS transition creates a smooth dim on hover effect that works in reverse when the cursor leaves. Setting transition: filter 0.2s ease on the element with brightness(0.6) declared in a .disabled or :hover rule and brightness(1) as the explicit base state produces a clean, hardware accelerated transition with no visible jank.
Brightness is one of the cheapest filter functions to render because it is implemented as a simple per pixel multiplication with no spatial sampling required, in contrast to blur which must sample many surrounding pixels. This means animating brightness in CSS transitions or @keyframes loops is essentially free on modern hardware and can be applied to many elements simultaneously without performance impact. The most common pitfall is not performance but visual perception: a brightness value that looks correct on a calibrated desktop display can appear washed out on a phone in bright sunlight or overly dim on an OLED screen with deep blacks. When tuning brightness for production, view your changes on at least two different device classes to confirm the effect reads as intended across the realistic range of user displays your audience uses.
Drag the brightness slider left to dim the element toward black or right to increase luminance toward white. The numeric value updates alongside the preview. Copy the generated filter: brightness() declaration when the result matches your design.
Step-by-step guide to css brightness filter generator:
Open the filter builder and select brightness
Add the brightness() function from the filter function list inside the builder panel. The preview element starts at the identity value of 1 with no visible change applied, giving you a clear baseline against which to compare every subsequent slider adjustment. The numeric input next to the slider also accepts a typed decimal value if you have a known target.
Drag the value slider
Move the slider left below 1 to dim the element toward black or right above 1 to brighten it toward overexposed white. The numeric value and live preview update simultaneously so you can stop at the exact moment the rendered effect matches your design intent without overshooting and having to backtrack to find the right value again.
Stack with other filters if needed
Add saturate() or contrast() to the filter stack if the brightness change alone produces the wrong colour response on your specific content. Adjust each added function independently while leaving brightness at its tuned value, then return to brightness if the combined stack needs further refinement. Try common pairings such as brightness(1.08) saturate(1.15) for polished hover highlights.
Copy the CSS and apply transitions
Copy the generated filter declaration into your stylesheet on the target selector. In your stylesheet, add transition: filter 0.2s ease to the element so the brightness change animates smoothly when a hover state or modifier class is added or removed, rather than snapping abruptly between the two values during user interaction or programmatic state changes.
Common situations where this approach makes a real difference:
E-commerce product image hover feedback
An e commerce developer needs all product thumbnails across the catalogue to provide hover feedback indicating they are clickable and lead to a product detail page. They apply filter: brightness(1) as the explicit resting state and filter: brightness(1.1) on :hover with transition: filter 0.15s ease for a quick highlight response. The generator previews the exact brightness(1.1) value against a representative product photograph, confirming it reads as a clear interactive highlight without washing out the product colours or shifting their perceived hue, which would distort the customer impression of the actual item.
Inactive sidebar navigation items
A dashboard designer wants inactive navigation icons in the sidebar to appear visually de prioritised relative to the currently active item, helping users focus on where they are in the application. They apply filter: brightness(0.6) to all nav icons and filter: brightness(1) to the active item via an .is-active modifier class. The generator confirms that brightness(0.6) is clearly distinct without making the icons disappear at the 24px size used in the navigation, and that the contrast against the dashboard background stays above accessibility readability thresholds.
Page background dimming behind modal
A developer dims the page content when a modal dialog opens by applying filter: brightness(0.5) to the main content wrapper via a class added by JavaScript when the modal mounts. The generator helps them choose between brightness(0.4) and brightness(0.6) by previewing both against a screenshot of the actual page content. The chosen 0.5 value dims clearly without making the background appear completely black, preserving enough visual context that users understand they are still on the same page while making clear that the modal is the active focus and any background interactions are temporarily suspended.
Disabled button state
A UI developer needs disabled icon buttons throughout the application to look clearly inactive without redesigning each button variant individually. Applying filter: brightness(0.65) opacity(0.7) to buttons with the disabled attribute via an attribute selector produces a visually muted state that reads as inactive across icon styles, background colours, and theme variants. The generator outputs the two function filter stack and the developer pairs it with pointer-events: none and cursor: not-allowed in the same rule so the buttons also correctly refuse pointer interaction, completing the accessible disabled state.
Get better results with these expert suggestions:
Apply brightness to an image wrapper rather than the img tag
Applying filter directly to an img element can cause the browser to repaint the image texture more aggressively than necessary on some rendering pipelines. Wrapping the image in a div and applying filter to the wrapper lets you combine the brightness effect with other CSS on the wrapper such as overflow: hidden, border-radius, and box-shadow without the filter affecting clip rendering of the contained image. The wrapper pattern also makes it easier to layer additional content over the image such as a caption overlay that is not affected by the brightness change.
Use CSS custom properties to manage brightness states
Define --el-brightness: 1 on a component root and reference it with filter: brightness(var(--el-brightness)) in the component rule. Override the variable in :hover, :disabled, .loading, and theme modifier classes to change the brightness for each state. This pattern keeps all brightness states in one logical place per component and makes them easy to audit and adjust later without hunting through multiple CSS rules scattered across selectors. Designers can also tune the variable values in DevTools live without rewriting filter declarations during prototyping.
Combine brightness with prefers-reduced-motion for accessible animations
If you animate brightness on hover or state change, wrap the transition declaration in an @media (prefers-reduced-motion: no-preference) query. This removes the animation for users who have requested reduced motion in their operating system accessibility settings while preserving the final brightness state change on hover, keeping the interaction feedback visible without the smooth animated transition. Users sensitive to motion get an immediate snap to the new value rather than a moving brightness change that can trigger vestibular discomfort or visual distress.
Test brightness filter on both sRGB and wide-gamut displays
On wide gamut displays such as modern iPhones, iPads, and MacBooks with P3 colour space, brightness values above 1 can produce visible colour clipping at lower thresholds than on standard sRGB monitors. A brightness(1.3) value that looks fine on a standard external display may produce blown out highlights and crushed colour gradients on a P3 screen. Test on both display types before finalising high brightness values for production, particularly when the filter is applied to photographic content where clipping shows as visible posterised banding in highlight regions rather than smooth tonal transitions.
Use brightness(1) as a base state for transitions
When setting up hover brightness transitions, always declare filter: brightness(1) on the resting state even though it has no visual effect. This gives the browser an explicit start value for the interpolation, preventing the transition from snapping rather than animating smoothly.
Combine brightness with saturate for vivid hover effects
Brightness alone above 1 can look washed out. Pairing filter: brightness(1.08) saturate(1.15) produces a richer, more vivid highlight that reads as polished rather than simply over-lit. The saturation boost counteracts the colour dilution that high brightness can introduce.
Use brightness(0) for silhouette effects
Applying filter: brightness(0) to a PNG or SVG element renders it as a solid black shape matching its outline. This is a simple technique for creating silhouette icons or shadow shapes from coloured source images without editing the source files.
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