CSS workflow
CSS image filters: order, scope and safe previews
A filter chain changes an element's rendered appearance. Compare the original with the result, preserve the chosen order and test the receiving component rather than treating a preview as a guarantee.
Content updated: · Maintainer and corrections
Each filter processes the previous result
CSS filter functions apply in written order, left to right. grayscale(100%) sepia(100%) removes color then tints the result; sepia(100%) grayscale(100%) ends in grayscale. Reordering can therefore change the result even with identical values. This is image processing, not transform matrix order.
The editor allows one instance of each of nine functions. Enabled steps are serialized in list order; disabled values are retained but ignored. CSS itself can repeat a function, but repeated instances and arbitrary imported CSS are outside this editor.
The filtered element includes its descendants
filter processes the element's content, backgrounds, borders and descendants as a group. Applying it to a card can also blur its text and controls. If only a photo should change, put the declaration on that image or its dedicated wrapper. backdrop-filter instead processes the backdrop behind an element and is not generated here.
A non-none filter establishes a stacking context and, except on the document root, a containing block for absolute and fixed descendants. An enabled brightness(100%) is visually neutral but is not replaced with none. Only disabling all functions emits filter: none;. Test positioned children in the real component.
Blur, transparency and clipping need separate checks
blur() accepts a non-negative length, not a percentage. Its length describes Gaussian standard deviation, not a box-shadow blur radius. Painted blur can extend outside the element without reserving layout space. The preview frame can clip that overflow; no overflow rule is exported.
opacity() is part of the filter chain; the CSS opacity property is composited after filtering. The preview's checkerboard stays outside the filtered artwork so transparency remains visible. Filters can reduce text readability: a decorative comparison is not a WCAG certificate. Check real content, focus indicators, zoom and supported browsers.
Editor ranges are not the full CSS grammar
This editor accepts blur 0–20px; brightness, contrast and saturation 0–300%; grayscale, invert, opacity and sepia 0–100%; and hue rotation −360–360deg. Use at most one decimal without a unit. CSS permits broader ranges in several cases, including brightness above 100% and angles beyond one turn.
Blank, exponent, non-finite, unit-bearing, over-precision and out-of-range inputs are rejected rather than silently repaired. An invalid enabled field blocks result preview, code and copying. Disabling that step excludes its value. Arrow keys nudge by 0.1 and Shift by 1. Presets reset filter values and order but keep the image; Reset everything also restores the sample.
Local reading still requires decoding
The file picker accepts PNG, JPEG and WebP up to 4 MiB. MIME and signature checks are format checks, not a safety certificate. Native createImageBitmap decodes the file; corrupted or unsupported data can fail. After decoding, each side must be at most 4096px and the image at most 4MP. Previews shrink proportionally to a maximum side of 1024px.
Animated formats use their default image or first frame, not animation playback. Browser-native decoding, orientation, color management and scaling can differ from a photo editor or another browser. Pixel limits are checked after decoding and cannot guarantee prevention of memory spikes. Resize large images first; this tool supplies no custom codec.
Blur is not redaction; keep the privacy boundary clear
CSS blur and opacity are reversible presentation settings, not redaction. The original image and content remain available. Never use them to conceal credentials, personal records or other sensitive material in a published page.
Image data, filenames and filter settings are not uploaded, persisted, placed in the URL or sent to input analytics. Existing approved page analytics may still run. Bitmaps are released on image replacement, reset and leaving the page; an older pending decode cannot replace a newer choice. Failed loading clearly returns to the sample. Only the current filter declaration is copied; no image, EXIF removal or edited-file export is provided.
.image { filter: grayscale(100%) sepia(100%); }
/* Reverse order ends in grayscale. */
.image-reversed { filter: sepia(100%) grayscale(100%); }
/* Visually neutral, but not none. */
.neutral { filter: brightness(100%); }
.unfiltered { filter: none; }Data provenance