Docs Hub

DownloadsLaravelLaravelLivewireLivewireAlpine.jsAlpine.jsNext.jsNext.jsVue.jsVue.jsZustandZustandNuxt.jsNuxt.jsFilamentFilamentVite.jsVite.jsNest.jsNest.jsBootstrapBootstrapTailwindCSSTailwindCSSدرحال بازسازی
ReactReact
راه های ارتباطی با ما

Docs Hub

Tailwind CSSTailwind CSS
Accent ColorAdding Custom StylesAlign ContentAlign ItemsAlign SelfAnimationAppearanceAspect RatioBackdrop FilterBackdrop Filter BlurBackdrop Filter BrightnessBackdrop Filter ContrastBackdrop Filter GrayscaleBackdrop Filter Hue RotateBackdrop Filter InvertBackdrop Filter OpacityBackdrop Filter SaturateBackdrop Filter SepiaBackface VisibilityBackground AttachmentBackground Blend ModeBackground ClipBackground ColorBackground ImageBackground OriginBackground PositionBackground RepeatBackground SizeBlock SizeBorder CollapseBorder ColorBorder RadiusBorder SpacingBorder StyleBorder WidthBox Decoration BreakBox ShadowBox SizingBreak AfterBreak BeforeBreak InsideCaption SideCaret ColorClearColorColor SchemeColorsColumnsCompatibilityContentCursorDark ModeDetecting Classes In Source FilesDisplayEditor SetupField SizingFillFilterFilter BlurFilter BrightnessFilter ContrastFilter Drop ShadowFilter GrayscaleFilter Hue RotateFilter InvertFilter SaturateFilter SepiaFlexFlex BasisFlex DirectionFlex GrowFlex ShrinkFlex WrapFloatFont FamilyFont Feature SettingsFont SizeFont SmoothingFont StretchFont StyleFont Variant NumericFont WeightForced Color AdjustFunctions And DirectivesGapGrid Auto ColumnsGrid Auto FlowGrid Auto RowsGrid ColumnGrid RowGrid Template ColumnsGrid Template RowsHeightHover Focus And Other StatesHyphensInline SizeIsolationJustify ContentJustify ItemsJustify SelfLetter SpacingLine ClampLine HeightList Style ImageList Style PositionList Style TypeMarginMask ClipMask CompositeMask ImageMask ModeMask OriginMask PositionMask RepeatMask SizeMask TypeMax Block SizeMax HeightMax Inline SizeMax WidthMin Block SizeMin HeightMin Inline SizeMin WidthMix Blend ModeObject FitObject PositionOpacityOrderOutline ColorOutline OffsetOutline StyleOutline WidthOverflowOverflow WrapOverscroll BehaviorPaddingPerspectivePerspective OriginPlace ContentPlace ItemsPlace SelfPointer EventsPositionPreflightResizeResponsive DesignRotateScaleScroll BehaviorScroll MarginScroll PaddingScroll Snap AlignScroll Snap StopScroll Snap TypeSkewStrokeStroke WidthStyling With Utility ClassesTable LayoutText AlignText Decoration ColorText Decoration LineText Decoration StyleText Decoration ThicknessText IndentText OverflowText ShadowText TransformText Underline OffsetText WrapThemeTop Right Bottom LeftTouch ActionTransformTransform OriginTransform StyleTransition BehaviorTransition DelayTransition DurationTransition PropertyTransition Timing FunctionTranslateUpgrade GuideUser SelectVertical AlignVisibilityWhite SpaceWidthWill ChangeWord BreakZ Index
Docs Hub

mask-type

Utilities for controlling how an SVG mask is interpreted.

Examples

Basic example

Use the mask-type-alpha and mask-type-luminance utilities to control the type of an SVG mask:

When using mask-type-luminance the luminance value of the SVG mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-alpha, the opacity of the SVG mask determines the visibility of the masked element.

Responsive design