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

Python

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

Python

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.