CSS Filter Generator
Build CSS filter effects visually with live preview — blur, brightness, contrast, sepia, hue-rotate, and more.
このツールについて
The CSS Filter Generator lets you visually create and fine-tune CSS filter effects with real-time preview on a sample image. Adjust nine filter functions: blur (0–20px), brightness (0–200%), contrast (0–200%), grayscale (0–100%), hue-rotate (0–360°), invert (0–100%), opacity (0–100%), saturate (0–200%), and sepia (0–100%). Upload your own image or use the built-in placeholder from Picsum Photos. The generated CSS filter property updates live as you drag sliders. Copy the CSS with one click. Six preset effects — Vintage, Cool, Warm, Dramatic, Faded, and Neon — give you instant starting points to customize further.
使い方
- 1 Choose a preset or start from scratch by adjusting individual sliders.
- 2 Upload your own image using the 'Upload Image' button, or use the default placeholder.
- 3 Drag sliders to adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.
- 4 Watch the live preview update in real time.
- 5 Click 'Copy CSS' to copy the generated filter property to your clipboard.
What the CSS filter property actually does
The CSS filter property applies graphical effects to an element as the browser paints it. Crucially, it changes only how the element is rendered on screen — the underlying image file is never modified. This makes filters perfect for hover states, theming, and quick visual tweaks that you can change or remove with a single line of CSS, with no image editor and no extra file to host. This generator gives you live sliders for the nine standard filter functions and writes the exact CSS rule for you as you drag, previewing it on a sample image (loaded from Picsum Photos) or one you upload.
The nine functions and their honest ranges
| Function | Neutral value | What it does |
|---|---|---|
blur(px) | 0px | Gaussian softening; the pixel value is the blur radius. |
brightness(%) | 100% | Below 100 darkens, above 100 lightens; 0% is black. |
contrast(%) | 100% | Pushes tones toward or away from mid-grey. |
grayscale(%) | 0% | Desaturates; 100% is fully monochrome. |
hue-rotate(deg) | 0deg | Spins every colour around the colour wheel. |
invert(%) | 0% | Flips colours to their opposite; 100% is a full negative. |
opacity(%) | 100% | Transparency, like the opacity property but composable in the filter chain. |
saturate(%) | 100% | Below 100 mutes colour, above 100 intensifies it. |
sepia(%) | 0% | Applies a warm brown tint for an aged look. |
The "neutral value" column is the one detail that separates clean output from bloated output, and this tool gets it right: a function at its neutral value has no visual effect, so the generator omits it from the result. If brightness is 100% and contrast is 100%, neither appears in the CSS. You only ever copy the functions you actually changed.
Order matters: a worked example
Suppose you set brightness to 110%, contrast to 120%, and sepia to 30%. The generator produces:
filter: brightness(110%) contrast(120%) sepia(30%);
The browser applies these left to right, each function operating on the output of the previous one. That sequencing is not cosmetic — it changes the result. Sepia followed by hue-rotate gives a different colour cast than hue-rotate followed by sepia, because the second function transforms an image that the first has already altered. This tool always emits the functions in a fixed, sensible order; if you later hand-edit the rule and reorder functions, expect the look to shift.
The built-in presets as starting points
Six presets load a full set of slider values you can then refine:
- Vintage — slightly dim and de-contrasted with a sepia tint and a small hue shift, for a faded-photo feel.
- Cool — a 180° hue-rotate plus extra saturation, swinging the palette toward blues.
- Warm — a gentle hue nudge and added sepia for golden-hour warmth.
- Dramatic — heavy contrast and saturation for a punchy, high-impact look.
- Faded — raised brightness with lowered contrast and saturation, a soft pastel wash.
- Neon — maxed saturation with strong contrast and a hue shift for an electric effect.
Pick the closest preset, then nudge individual sliders rather than building every effect from zero. Reset to Default returns every slider to its neutral value.
Practical tips and common mistakes
- blur() is expensive. A large blur radius repainted on scroll or hover can stutter on low-end devices. Keep radii modest and avoid blurring large elements during animation.
- Filters affect the whole element, including text. If you apply a filter to a container, child text and borders are filtered too. Apply it to the
<img>itself, not its wrapper, unless you want everything tinted. - opacity() vs the opacity property. Inside a filter chain,
opacity()composes with the other functions in order; the standaloneopacityproperty always applies last. For predictable layering, prefer keeping transparency in the filter chain when you are already using filters. - Match a dark theme with invert. A quick way to make a black-on-white diagram fit a dark UI is
filter: invert(1) hue-rotate(180deg), which flips lightness while keeping hues roughly recognizable. - Test in the destination. The preview here is accurate, but rendering can differ slightly across browsers, especially for blur and on high-DPI screens. Verify the final look where the CSS will actually live.
One more practical detail: filters are GPU-accelerated in modern browsers, so a static filtered image costs almost nothing to display, but animating filter values triggers a repaint on every frame. If you want a smooth hover transition, animate the whole filter property with a CSS transition rather than re-rendering, and keep the effect simple. The slider math and CSS generation run entirely in your browser. If you upload your own image it is read locally and never sent anywhere; only the default placeholder is fetched from an external image host.