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.

Value is of type BlendMode and defaults to BlendMode.MODULATE.

border_radius

The radius of the mask.

Value is of type BorderRadius.

content

A child Control to apply a shader to.

shader

Use gradient as a shader.

Value is of type Gradient.