Skip to content

985616-[Child] Liquid Glass Effect Getting Started UG #3882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Karthickmani97 merged 12 commits into from
Dec 14, 2025
Merged

985616-[Child] Liquid Glass Effect Getting Started UG #3882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4102625
985616 - Liquid Glass Effect Getting Started UG
VishalOmprasad Dec 11, 2025
e9fc855
Added getting started for liquid glass effect.
Karthickmani97 Dec 12, 2025
c572263
Updated review corrections.
Karthickmani97 Dec 12, 2025
344c356
985616 - Liquid glass UG review corrections
VishalOmprasad Dec 12, 2025
6068ae4
985616 - CI issue Front matter resolved
VishalOmprasad Dec 12, 2025
868e506
985616 - LG GS Review corrections addressed
VishalOmprasad Dec 12, 2025
6a3f4e8
985616 - LG Overview description updated to resolve CI
VishalOmprasad Dec 12, 2025
26b2982
985616 - LG overview description changed
VishalOmprasad Dec 12, 2025
ba73fa8
985616 - Review corrections addressed
VishalOmprasad Dec 12, 2025
ab9b53d
Merge branch 'development' of https://github.com/syncfusion-content/m…
Karthickmani97 Dec 13, 2025
ee10000
Updated liquid glass review corrections.
Karthickmani97 Dec 13, 2025
08dbaa3
Resolved CI issue
Karthickmani97 Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions MAUI/Liquid-Glass-UI/Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: UG

# Liquid Glass UI for .NET MAUI Overview

Syncfusion® provides `Liquid Glass visual effect support` for all `.NET MAUI controls`, introducing a `modern UI design` with a `visually appealing`, `translucent`, `glass-like appearance`. This feature applies `blurred backgrounds`, `adaptive color tinting`, and `light refraction` to enhance the overall `look and feel` of your applications while maintaining `readability` and `accessibility` across platforms.
Syncfusion® provides support for the Liquid Glass visual effect across all .NET MAUI controls. This feature introduces a modern UI design with a visually appealing, translucent, glass-like appearance. It applies blurred backgrounds, adaptive color tinting, and light refraction to enhance the overall look and feel of your applications while maintaining readability and accessibility across platforms.

![overview-liquid-glass-ui-in-.net-maui](images/overview-liquid-glass-ui-in-.net-maui.webp)

## Key Features

* **Adaptive Blur & Reflection:** Blurs background and reflects light for a glassy look.
* **Adaptive Blur & Reflection:** Applies background blur and reflects light for a glassy look.
* **Edge Depth Effect:** Adds a subtle lens effect along edges for depth.
* **Interaction:** Reacts to touch and hover instantly.
* **Smooth Motion:** Provides fluid animations and transitions.
* **Smooth Motion:** Provides fluid animations and seamless transitions.
332 changes: 332 additions & 0 deletions MAUI/Liquid-Glass-UI/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,332 @@
---
layout: post
title: Getting Started with Liquid Glass UI in Syncfusion® .NET MAUI Controls
description: Getting started with the Liquid Glass Effect UI in Syncfusion® .NET MAUI controls and learn how to enable and customize it.
platform: MAUI
control: General
documentation: UG
---

# Getting Started with Liquid Glass for Modern UI

This section explains how to enable and customize the Liquid Glass Effect in Syncfusion® .NET MAUI controls. For detailed information on specific Syncfusion® controls and their usage, refer to the respective Getting Started documentation. Ensure the control is properly configured and functioning before applying the Liquid Glass Effect.

N> This feature is supported only on `.NET 10`

## Supported Platforms

* macOS 26 or higher
* iOS 26 or higher

## Liquid Glass Effect

The Liquid Glass Effect provides a modern, translucent design with background blur and depth effects, enhancing the visual appearance of your UI without requiring major code changes. To apply the Liquid Glass Effect to any Syncfusion® .NET MAUI control or custom view (such as a DataTemplate), wrap the control inside the `SfGlassEffectView` class.

This view acts as a visual container that adds blur, translucency, and light refraction to its content, creating a realistic glass-like appearance. In this section, we will demonstrate how to use `SfGlassEffectView` with Syncfusion® controls to achieve a visually appealing glass effect.

The `SfGlassEffectView` class is available in [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) and provides the following properties:

### Effect types

The `EffectType` property specifies the type of glass effect to apply:

* **Regular:** Creates a blurred, frosted glass appearance.
* **Clear:** Creates a transparent, glass-like appearance.

{% tabs %}
{% highlight XAML hl_lines="14" %}

...
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
xmlns:button="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0F4C75" Offset="0.0"/>
<GradientStop Color="#3282B8" Offset="0.5"/>
<GradientStop Color="#1B262C" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<core:SfGlassEffectView CornerRadius="20"
EffectType="Clear"
Padding="16"
HeightRequest="140"
WidthRequest="420">
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
<!-- Avatar -->
<core:SfGlassEffectView WidthRequest="64"
HeightRequest="64"
EffectType="Clear"
CornerRadius="32">
<core:SfAvatarView WidthRequest="64"
HeightRequest="64"
FontSize="24"
CornerRadius="32"
FontAttributes="Bold"
AvatarName="SF"
Background="Transparent"
ContentType="Initials"
InitialsType="DoubleCharacter"/>
</core:SfGlassEffectView>
<!-- Title / Subtitle -->
<VerticalStackLayout Grid.Column="1" Spacing="2"
VerticalOptions="Center">
<Label Text="Syncfusion®"
TextColor="White"
FontAttributes="Bold"
FontSize="20"/>
<Label Text="Deliver innovation with ease"
TextColor="#DDFFFFFF"
FontSize="15"/>
</VerticalStackLayout>
<!-- Action Button -->
<core:SfGlassEffectView CornerRadius="20"
EffectType="Clear"
WidthRequest="100"
Grid.Column="2"
HeightRequest="40">
<button:SfButton Text="Follow"
Background="Transparent"
TextColor="White"/>
</core:SfGlassEffectView>
</Grid>
</core:SfGlassEffectView>
</Grid>

{% endhighlight %}
{% endtabs %}

### Corner radius

Defines the corner radius for the view, enabling customization of its shape such as rounded rectangles or capsules.

{% tabs %}
{% highlight XAML hl_lines="10" %}

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0F4C75" Offset="0.0"/>
<GradientStop Color="#3282B8" Offset="0.5"/>
<GradientStop Color="#1B262C" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<core:SfGlassEffectView EffectType="Clear"
CornerRadius="30"
EnableShadowEffect="true"
Padding="16"
HeightRequest="140"
WidthRequest="420">
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
<!-- Avatar -->
<core:SfGlassEffectView WidthRequest="64"
HeightRequest="64"
EffectType="Clear"
CornerRadius="32">
<core:SfAvatarView WidthRequest="64"
HeightRequest="64"
FontSize="24"
CornerRadius="32"
FontAttributes="Bold"
AvatarName="SF"
Background="Transparent"
ContentType="Initials"
InitialsType="DoubleCharacter"/>
</core:SfGlassEffectView>
<!-- Title / Subtitle -->
<VerticalStackLayout Grid.Column="1" Spacing="2"
VerticalOptions="Center">
<Label Text="Syncfusion®"
TextColor="White"
FontAttributes="Bold"
FontSize="20"/>
<Label Text="Deliver innovation with ease"
TextColor="#DDFFFFFF"
FontSize="15"/>
</VerticalStackLayout>
<!-- Action Button -->
<core:SfGlassEffectView CornerRadius="20"
EffectType="Clear"
WidthRequest="100"
Grid.Column="2"
HeightRequest="40">
<button:SfButton Text="Follow"
Background="Transparent"
TextColor="White"/>
</core:SfGlassEffectView>
</Grid>
</core:SfGlassEffectView>
</Grid>

{% endhighlight %}
{% endtabs %}

### Enable shadow effect

Adds a soft shadow to the content within the glass view, creating depth and a more realistic appearance.

{% tabs %}
{% highlight XAML hl_lines="11" %}

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0F4C75" Offset="0.0"/>
<GradientStop Color="#3282B8" Offset="0.5"/>
<GradientStop Color="#1B262C" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<core:SfGlassEffectView EffectType="Clear"
CornerRadius="20"
EnableShadowEffect="true"
Padding="16"
HeightRequest="140"
WidthRequest="420">
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
<!-- Avatar -->
<core:SfGlassEffectView WidthRequest="64"
HeightRequest="64"
EffectType="Clear"
CornerRadius="32">
<core:SfAvatarView WidthRequest="64"
HeightRequest="64"
FontSize="24"
CornerRadius="32"
FontAttributes="Bold"
AvatarName="SF"
Background="Transparent"
ContentType="Initials"
InitialsType="DoubleCharacter"/>
</core:SfGlassEffectView>
<!-- Title / Subtitle -->
<VerticalStackLayout Grid.Column="1" Spacing="2"
VerticalOptions="Center">
<Label Text="Syncfusion®"
TextColor="White"
FontAttributes="Bold"
FontSize="20"/>
<Label Text="Deliver innovation with ease"
TextColor="#DDFFFFFF"
FontSize="15"/>
</VerticalStackLayout>
<!-- Action Button -->
<core:SfGlassEffectView CornerRadius="20"
EffectType="Clear"
WidthRequest="100"
Grid.Column="2"
HeightRequest="40">
<button:SfButton Text="Follow"
Background="Transparent"
TextColor="White"/>
</core:SfGlassEffectView>
</Grid>
</core:SfGlassEffectView>
</Grid>

{% endhighlight %}
{% endtabs %}

### Set background color

Applies a background tint color to the glass view, to enhance modern UI styling and improve
readability.

{% tabs %}
{% highlight XAML hl_lines="11" %}

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0F4C75" Offset="0.0"/>
<GradientStop Color="#3282B8" Offset="0.5"/>
<GradientStop Color="#1B262C" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<core:SfGlassEffectView EffectType="Clear"
CornerRadius="20"
Background="Orange"
Padding="16"
HeightRequest="140"
WidthRequest="420">
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
<!-- Avatar -->
<core:SfGlassEffectView WidthRequest="64"
HeightRequest="64"
EffectType="Clear"
CornerRadius="32">
<core:SfAvatarView WidthRequest="64"
HeightRequest="64"
FontSize="24"
CornerRadius="32"
FontAttributes="Bold"
AvatarName="SF"
Background="Transparent"
ContentType="Initials"
InitialsType="DoubleCharacter"/>
</core:SfGlassEffectView>
<!-- Title / Subtitle -->
<VerticalStackLayout Grid.Column="1" Spacing="2"
VerticalOptions="Center">
<Label Text="Syncfusion®"
TextColor="White"
FontAttributes="Bold"
FontSize="20"/>
<Label Text="Deliver innovation with ease"
TextColor="#DDFFFFFF"
FontSize="15"/>
</VerticalStackLayout>
<!-- Action Button -->
<core:SfGlassEffectView CornerRadius="20"
EffectType="Clear"
WidthRequest="100"
Grid.Column="2"
HeightRequest="40">
<button:SfButton Text="Follow"
Background="Transparent"
TextColor="White"/>
</core:SfGlassEffectView>
</Grid>
</core:SfGlassEffectView>
</Grid>

{% endhighlight %}
{% endtabs %}

## Interactive Glass Effects

Enable glass effects that respond to user interactions with clear transparency and dynamic lighting for an engaging UI. To enable this feature, set the `EnableLiquidGlassEffect` property to `true` on the Syncfusion `SfSwitch` control. This activates interaction-based visual effects.

{% tabs %}
{% highlight XAML %}

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#0F4C75" Offset="0.0"/>
<GradientStop Color="#3282B8" Offset="0.5"/>
<GradientStop Color="#1B262C" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<core:SfGlassEffectView EffectType="Clear"
CornerRadius="20"
HeightRequest="140"
WidthRequest="380">
<button:SfButton Text="Regular Glass"
EnableLiquidGlassEffect="True"
FontSize="16"
WidthRequest="150"
HeightRequest="40"
Background="Transparent"
TextColor="Black"/>
</core:SfGlassEffectView>
</Grid>

{% endhighlight %}
{% endtabs %}

## Controls list

For control specific usage of the Liquid Glass Effect on individual Syncfusion® controls, including availability, and configuration details, please refer to the respective control documentation.

N> View sample in GitHub.
1 change: 1 addition & 0 deletions maui-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@
Liquid Glass UI
<ul>
<li><a href="/maui/Liquid-Glass-UI/overview">Overview</a></li>
<li><a href="/maui/Liquid-Glass-UI/getting-started">Getting Started</a></li>
</ul>
</li>
<li>
Expand Down