ClientSideTools Privacy-First Browser Tools

CSS `mask-image` Gradient Builder

Build linear and radial alpha masks visually, preview them locally, and export production-ready CSS.

SVG & CSS Engineering Local processing Images and settings are processed locally.

Builder

Gradient stops

Preview

Results

Adjust gradient settings and generate mask CSS.

Metrics

    Introduction

    CSS masking allows you to reveal and hide parts of an element using alpha or luminance sources. Gradient masks are useful for fades, soft edges, and creative image treatments.

    This builder helps you create gradient masks visually and export clean CSS.

    How it works

    The tool generates a gradient using black with varying alpha values. In an alpha mask, opaque areas show the element and transparent areas hide it.

    • Linear mode uses an angle.
    • Radial mode uses a shape and center position.
    • Stops are sorted by position.
    • The preview updates as you edit.

    How to use

    1. Optionally upload a preview image.
    2. Select linear or radial mode.
    3. Adjust angle or radial center.
    4. Add and edit gradient stops.
    5. Generate and copy the CSS.

    Practical example

    A simple vertical fade can be written as:

    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

    Use cases

    • Fading hero images.
    • Softening image edges.
    • Creating scroll-reveal effects.
    • Building decorative overlays.
    • Prototyping masking without design software.

    Best practices

    • Use subtle fades for content images.
    • Ensure masked images retain meaningful alt text.
    • Test masking at multiple viewport sizes.
    • Include vendor prefixes where needed.
    • Avoid masking essential text or controls.

    Common mistakes

    • Using fully transparent stops unintentionally.
    • Forgetting prefixed CSS for broader support.
    • Masking important UI elements.
    • Using too many stops for simple fades.
    • Assuming mask support is identical in all browsers.

    Limitations

    • The preview is approximate and depends on browser support.
    • Luminance masking is not covered by this alpha-based builder.
    • Uploaded preview images are not optimized.
    • Complex mask compositions may require manual CSS.

    Browser compatibility

    Modern browsers support CSS masking to varying degrees. Include -webkit-mask-image where broader compatibility is required.

    FAQ

    Is my image uploaded?

    No. Preview images are processed locally in your browser.

    Why use black with alpha?

    For alpha masks, the color is less important than transparency. Black with alpha creates predictable stop values.

    Do I need the vendor prefix?

    It depends on your browser support requirements. Including -webkit-mask-image improves compatibility in some browsers.

    Can I use this for luminance masks?

    This tool focuses on alpha gradients. Luminance masks require different source images and mask-mode handling.

    References

    Version and changelog

    • Version: 1.0.0
    • Last updated: August 8, 2026
    • Changelog: Initial production release.