Create beautiful CSS gradient masks for text, images, and elements. Free online tool with live preview, custom angles, and instant code generation for Tailwind CSS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum libero, vehicula vestibulum fringilla in, gravida non elit. Sed posuere condimentum finibus. Aenean pretium mi dolor, tempor laoreet ligula sagittis a. Donec libero augue, feugiat in condimentum in, consectetur id erat. Proin aliquet, nisi vitae euismod vestibulum, turpis est vulputate velit, non lacinia ex dolor ac dui. Sed id magna ullamcorper, placerat ligula et, condimentum tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ac semper mi, nec accumsan enim. In auctor, purus et bibendum interdum, quam velit blandit arcu, at tristique elit lacus id mi.
Integer viverra, libero ac ullamcorper pharetra, magna ligula vulputate erat, venenatis suscipit ligula ipsum eget velit. In consectetur commodo accumsan. Nam at sem vehicula nisl imperdiet efficitur. Etiam tortor augue, auctor non augue pulvinar, ornare posuere mauris. Fusce consequat, sapien vel egestas porta, purus odio consectetur augue, eget sollicitudin magna leo in sem. Cras consequat justo ut sagittis dignissim. Sed ut tortor consequat, sagittis sem in, sagittis lacus. Ut eu augue sed justo consequat congue. Sed ac efficitur ante, ut tempus nisl. Pellentesque venenatis pharetra velit. Donec tempus, est in vehicula finibus, dolor diam commodo augue, quis volutpat nulla mauris vitae risus.
Proin eu consectetur ipsum, sed tempor lacus. Fusce cursus purus velit, quis condimentum mi tempor ac. Cras tincidunt quam vitae consectetur interdum. Morbi quis sem risus. Ut pellentesque nisl vel tellus pellentesque, in efficitur mi ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sed risus turpis. Suspendisse potenti. Pellentesque efficitur quis nisi ac laoreet. Donec bibendum porttitor odio vitae feugiat. Phasellus ornare fringilla venenatis.
Aenean at justo nec magna volutpat consectetur non sed augue. Cras viverra mollis purus. Proin vel mi ut augue cursus sodales. Nulla molestie bibendum libero sed pulvinar. Aliquam id luctus enim. Nullam viverra, lacus tempus aliquam rutrum, ante eros rhoncus metus, sed porta libero turpis eu diam. Nunc mollis id lorem in pretium. Nullam quis lorem fermentum, laoreet purus eget, finibus urna. Morbi sit amet tempor quam, quis ultricies lacus. Ut ornare sapien non neque ultrices tincidunt. Cras a tellus augue. Quisque ultricies arcu massa, vel blandit ante lacinia sit amet. Cras tempor posuere iaculis.
<div className="[mask-image:linear-gradient(90deg,_rgba(0,0,0,1)_0%,_rgba(0,0,0,0)_100%)] [-webkit-mask-image:linear-gradient(90deg,_rgba(0,0,0,1)_0%,_rgba(0,0,0,0)_100%)]">
Your content here
</div>[mask-image:linear-gradient(90deg,_rgba(0,0,0,1)_0%,_rgba(0,0,0,0)_100%)] [-webkit-mask-image:linear-gradient(90deg,_rgba(0,0,0,1)_0%,_rgba(0,0,0,0)_100%)]Enable to add an intermediate gradient stop
A CSS gradient mask is a visual effect that uses the mask-image property to create a fade effect on elements. It makes parts of an element gradually transparent using a linear or radial gradient, creating beautiful transitions and fade effects.
You have two options: Inline Tailwind uses Tailwind's arbitrary value syntax (e.g., [mask-image:linear-gradient(...)]) directly in your HTML - no CSS file needed! Alternatively, use Custom Class mode to generate a reusable CSS class that you can add to your stylesheet. Both modes support linear and radial gradients.
Inline Tailwind (recommended): Best for quick implementation and no extra CSS files. Uses Tailwind's arbitrary values directly in your HTML. Perfect for one-off uses or when you want to keep everything in your markup. Custom Class: Better when you need to reuse the same gradient mask across multiple elements or prefer separation of concerns with dedicated CSS classes.
The generator supports multiple directions: Left to Right (90°), Right to Left (270°), Top to Bottom (180°), Bottom to Top (0°), and diagonal angles at 45°, 135°, 225°, and 315°. You can also set any custom angle from 0° to 360° using the slider for complete control.
Yes! Gradient masks work on any HTML element including text, images, divs, sections, and other containers. The mask creates a fade effect by controlling the element's transparency, making it perfect for creating sophisticated visual effects in web design.
Absolutely! The generator includes advanced opacity controls that let you set start and end opacity from 0-100%. You can also add middle stops for multi-step gradients, adjust gradient positions, and use quick presets like Full Fade (100% to 0%), Soft Fade (100% to 10%), or Edge Fade (starts at 70% position). This gives you complete control over the intensity and style of your gradient mask effects.
Radial gradient masks create circular or elliptical fade effects that radiate outward from a center point. They are perfect for spotlight effects, vignettes, and circular fade-outs. You can control the shape (circle or ellipse), the position (center, corners, or edges), and the size (closest-side, farthest-corner, or custom pixel values).
Linear gradient masks fade in a straight line from one side to another (e.g., left to right, or at any custom angle). Radial gradient masks fade outward from a center point in a circular or elliptical pattern. Use linear for directional fades and radial for spotlight, vignette, or circular effects.
Yes! This Tailwind gradient mask generator is completely free to use. Generate unlimited gradient masks, preview them live, and copy the code for your projects without any restrictions or registration required.
CSS gradient masks using mask-image are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The generator includes the -webkit- prefix for broader compatibility with older browser versions.
See gradient mask effects in real-time as you adjust directions and angles
Control gradient direction with precision from 0° to 360°
One-click copy for Tailwind classes and CSS code
Quick access to common directions and diagonal angles
Circle and ellipse radial masks for spotlight and vignette effects
Works perfectly on desktop, tablet, and mobile devices