Skip to main content

ShaderMask

A control that applies a mask generated by a shader to its child.

For example, ShaderMask can be used to gradually fade out the edge of a child by using a LinearGradient mask.

Examples​

Live example

Adding a pink glow around image edges​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            [
                ft.ShaderMask(
                    ft.Image(
                        src="https://picsum.photos/200/200?1",
                        width=200,
                        height=200,
                        fit=ft.ImageFit.FILL,
                    ),
                    blend_mode=ft.BlendMode.MULTIPLY,
                    shader=ft.RadialGradient(
                        center=ft.alignment.center,
                        radius=2.0,
                        colors=[ft.colors.WHITE, ft.colors.PINK],
                        tile_mode=ft.GradientTileMode.CLAMP,
                    ),
                )
            ]
        )
    )

ft.app(target=main)

Gradually fade out image to the bottom edge​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            [
                ft.ShaderMask(
                    ft.Image(src="https://picsum.photos/100/200?2"),
                    blend_mode=ft.BlendMode.DST_IN,
                    shader=ft.LinearGradient(
                        begin=ft.alignment.top_center,
                        end=ft.alignment.bottom_center,
                        colors=[ft.colors.BLACK, ft.colors.TRANSPARENT],
                        stops=[0.5, 1.0],
                    ),
                    border_radius=10,
                ),
            ]
        )
    )

ft.app(target=main)

Properties​

blend_mode​

The blend mode to use when applying the shader to the content.

Property value is BlendMode enum with MODULATE as default.

Supported values:

  • CLEAR
  • COLOR
  • COLOR_BURN
  • COLOR_DODGE
  • DARKEN
  • DIFFERENCE
  • DST
  • DST_A_TOP
  • DST_IN
  • DST_OUT
  • DST_OVER
  • EXCLUSION
  • HARD_LIGHT
  • HUE
  • LIGHTEN
  • LUMINOSITY
  • MODULATE (default)
  • MULTIPLY
  • OVERLAY
  • PLUS
  • SATURATION
  • SCREEN
  • SOFT_LIGHT
  • SRC
  • SRC_A_TOP
  • SRC_IN
  • SRC_OUT
  • SRC_OVER
  • VALUES
  • XOR

See BlendMode from Flutter documentation for blend mode examples.

border_radius​

See Container.border_radius property docs for more information about border radius.

content​

A child Control to apply a shader to.

shader​

Use gradient as a shader. See Container.gradient property docs for more information about gradients.