CSS Mask Generator
Generate a monotonic two-stop alpha mask.
Enabling local controls…
Preview and code
Edit fields and build a preview; complete code can be copied or downloaded.
Model and scope
Generate a monotonic two-stop alpha mask. Linear directions use angle units or top/bottom/left/right keywords; radial uses a centered circle. Stops must be ordered within0–100%. Preview masks a generated local illustration; no image is fetched.
How to use this tool
Edit the bounded fields, process locally, inspect the native preview, then copy or download complete code. Editing clears stale output.
When not to use it
Generate a monotonic two-stop alpha mask. Linear directions use angle units or top/bottom/left/right keywords; radial uses a centered circle. Stops must be ordered within0–100%. Preview masks a generated local illustration; no image is fetched.