Create CSS mask effects with gradients, images, and SVG masks with live element preview.
CSS Mask Image Generator defines a gradient, image, or SVG as an element's CSS mask and shows the resulting visibility effect in a live preview. It is useful for fading edges, revealing silhouettes, and creating transparent cutouts without modifying the displayed content itself. The key distinction is that a mask controls visibility rather than supplying visible color. With an alpha-based mask, transparent mask pixels conceal the element, while increasingly opaque pixels reveal increasingly more of it.
The chosen gradient, image, or SVG provides the visibility pattern for the previewed element. In an alpha-based source, each mask pixel's opacity determines how strongly the corresponding element pixel appears. Fully transparent regions conceal it, partially transparent regions produce partial visibility, and fully opaque regions reveal it. The source's displayed color is not painted onto the element.
Gradient masks create continuous fades by transitioning between transparent and opaque stops. Image and SVG masks provide more detailed silhouettes or cutouts based on their transparency or mask semantics. The generated CSS changes the element's painted appearance. It does not rewrite the mask asset, remove the underlying content, shrink the element's layout box, or alter surrounding document flow.
No. With alpha masking, fully opaque black reveals the element just as fully opaque white does; transparent pixels hide it. With luminance masking, brightness also contributes to visibility, so black and white can behave differently. Check the mask mode and source used by the final CSS before interpreting a grayscale asset as an alpha mask.
No. A CSS mask changes rendered visibility, not document structure. The element and its content remain in the document, and its layout box still occupies space. A mask is therefore not a way to delete sensitive content or guarantee that concealed regions are unavailable to interaction or assistive technology. Handle those requirements separately.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.