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.
✨ Use Tailwind arbitrary values directly - no custom CSS needed!
<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%)]✨ No CSS required! Tailwind arbitrary values let you use gradient masks directly in your HTML without writing custom CSS.
Consectetur adipiscing elit. Donec pulvinar justo ac elit luctus luctus. Sed cursus ut sapien ac suscipit. Donec tincidunt ac ante et euismod. Nullam volutpat mi a tellus fermentum, non iaculis urna mollis. Maecenas ornare et arcu ac faucibus. Nulla sagittis bibendum rhoncus. Pellentesque sed pharetra leo. Maecenas vulputate nunc enim, et consequat augue eleifend sit amet. Vivamus ligula nibh, convallis vitae tellus nec, facilisis interdum diam. Lorem ipsum dolor sit amet.
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 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.
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.
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
Automatic dark mode support for comfortable viewing
Works perfectly on desktop, tablet, and mobile devices