WHP
Work, Hone, Play.

Tailwind Gradient Mask Generator

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.

Text Gradient Mask Example

Image Gradient Mask Example

Element Gradient Mask Example

<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%)]

Gradient Opacity & Stops

100% @ 0%
100%
0%

Enable to add an intermediate gradient stop

0% @ 100%
0%
100%
0%
100%
0%
25%
50%
75%
100%
Start: 100%
End: 0%

How to Use the Gradient Mask Generator

  1. Choose between Linear or Radial gradient type using the toggle at the top of the controls
  2. For linear gradients: Select a direction using the preset buttons (L→R, R→L, T→B, B→T) or diagonal angles (45°, 135°, 225°, 315°), or adjust the custom angle slider for precise control from 0° to 360°
  3. For radial gradients: Set the position (center, corners, or edges), choose a shape (circle or ellipse), and select the size (closest-side, farthest-corner, or custom pixel values)
  4. Fine-tune the gradient with opacity controls:
    • Set start and end opacity (0-100%)
    • Add optional middle stops for multi-step gradients
    • Adjust gradient positions for custom fade ranges
    • Use quick presets: Full Fade, Soft Fade, Edge Fade, Spotlight, or Vignette
  5. Choose between "Inline Tailwind" (no CSS needed) or "Custom Class" (reusable CSS class)
  6. Preview the gradient mask effect in real-time on text, images, and box elements
  7. Copy the generated code with one click
  8. Inline Tailwind: Paste the classes directly into your HTML - no additional CSS needed!
  9. Custom Class: Add the CSS to your stylesheet and apply the class to your HTML elements

Frequently Asked Questions

What is a CSS gradient mask?

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.

How do I use gradient masks with Tailwind CSS?

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.

Should I use inline Tailwind classes or custom CSS classes?

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.

What gradient mask directions are supported?

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.

Can I use gradient masks on text and images?

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.

Can I control the gradient opacity and fade intensity?

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.

What are radial gradient masks?

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).

What is the difference between linear and radial gradient masks?

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.

Is this gradient mask generator free?

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.

What browsers support CSS gradient masks?

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.

Key Features

Live Preview

See gradient mask effects in real-time as you adjust directions and angles

Custom Angles

Control gradient direction with precision from 0° to 360°

Copy Code

One-click copy for Tailwind classes and CSS code

Preset Directions

Quick access to common directions and diagonal angles

Radial Gradients

Circle and ellipse radial masks for spotlight and vignette effects

Responsive

Works perfectly on desktop, tablet, and mobile devices