CSS Filter Generator

Build a filter pipeline

1. Choose a filter type and add a row. New rows start at visual-identity settings; the initial workspace contains brightness and saturation examples. Repeated types are allowed, up to twelve total rows.
2. Edit values, enable or exclude rows, and use Move up, Move down or Duplicate. The next function receives the previous function’s output, so changing order can change the result.
3. Compare Filtered and Original at the same scale, or switch from Fit to 100% for scrolling inspection. Copy CSS uses the displayed declaration, including while Original is selected; invalid active fields have no current result.

Understand the function sequence

A filter is a left-to-right processing sequence, not a comma-separated shadow stack. Two blur rows stay as two authored calls. Turning a row off omits that call without moving it; turning it on restores its existing position.

Brightness, contrast and saturation can exceed 100% in this editor. Grayscale, inversion, opacity and sepia use a bounded 0–100% range. Hue angles retain their authored turns, so -450deg is not silently rewritten as 270deg.

Drop-shadow follows the pipeline input’s alpha silhouette, including earlier results. Its third length and blur() use Gaussian standard deviation in CSS pixels, not box-shadow’s blur-radius convention. There is no inset or spread control; more shadows use repeated calls.

An enabled identity function still produces a filter value and can affect grouping, stacking or positioning on a receiving element. Clear filters or exclude every row to generate filter: none;. Do not assume every visually neutral list is structurally equivalent to none.

Useful order and alpha examples

The example applies brightness(125%), blur(1.25px), a shadow at -6px by 8px with sigma 3px and rgb(20 40 80 / 35%), then another blur(0.5px). Excluding the shadow leaves both blur calls in their original order.

For a conceptual opaque channel value of one quarter, brightness(50%) then invert(100%) gives seven eighths; reversing them gives three eighths. This explains order, not a promise of exact browser pixel values.

Two opacity(50%) calls can reduce alpha to one quarter. A zero-offset opaque shadow is not necessarily neutral on semitransparent content; using a fully transparent shadow avoids adding that opacity.

Authoring and preview limits

This numeric editor supports ten function types with px, percentages, degrees and explicit six-digit hex shadow color plus opacity. Its finite ranges are product limits, not the complete CSS grammar. There is no arbitrary CSS import, custom SVG filter graph, image upload, remote image, animation or raster export.

The specimen is fixed illustrative content, not your photograph or page. Transparent holes and partial-alpha shapes show silhouette behavior. Different receiving content, backgrounds, layout and browser rendering can change the appearance; this is not a color, readability or contrast certification.

Fit scales the whole logical canvas, not the authored CSS lengths twice. 100% keeps CSS-coordinate scale and uses local scrolling; it is not a hardware-pixel promise. Preview margins are approximate, blur tails can clip, and an extreme chain can look small in Fit.

Invalid active drafts remove the current CSS and normal preview instead of leaving a stale result. Disabled rows retain drafts but are excluded from CSS and active validation. CSS and Copy remain independent of a preview-only native capability failure, which is clearly labelled.

Local styling without uploaded images

The tool adds no upload, remote image request, saved draft history, settings-bearing link or telemetry containing your settings. The specimen is code-native and Copy is explicit. Existing site services, extensions and copies you keep are outside a universal privacy or erasure promise.