The Windows 11 taskbar styling guide

August 26, 2026 · View on GitHub

Table of contents

Introduction

This is a collection of commonly requested taskbar styling customizations for Windows 11. It is intended to be used with the Windows 11 Taskbar Styler Windhawk mod.

If you're not familiar with Windhawk, here are the steps for installing the mod:

  • Download Windhawk from windhawk.net and install it.
  • Go to "Mods" in the upper right menu.
  • Find and install the "Windows 11 Taskbar Styler" mod.

After installing the mod, open its Settings tab and adjust the styles according to your preferences.

Some customizations are best adjusted with other Windhawk mods. Links to those mods are provided where applicable.

See also: The Windows 11 start menu styling guide, The Windows 11 notification center styling guide.

Supported components

As of version 1.5 of Windows 11 Taskbar Styler, the following components can be styled along with the taskbar:

  • Alt+Tab
  • Task view (Win+Tab)
  • Volume popup
  • Language popup
  • Snap layout popups

Finding targets

How to find targets using UWPSpy.

Missing customizations

If you're looking for a customization that is not listed here, please open an issue.

Contributing

If you have a taskbar styling customization or theme that you would like to share, please submit a pull request.

Themes

Themes are collections of styles that can be imported into the Windows 11 Taskbar Styler mod. The following themes are available:

LinkScreenshot
TranslucentTaskbarTranslucentTaskbar
DockLikeDockLike
SimplyTransparentSimplyTransparent
SquircleSquircle
MatterMatter
WinXPWinXP
BubblesBubbles
RosePineRosePine
WinVistaWinVista
CleanSlateCleanSlate
LucentLucent
SunValleySunValley
SunValley (Legacy)SunValley (Legacy)
BottomDensyBottomDensy
TaskbarXIITaskbarXII
xdarkxdark
Windows7Windows7
AerisAeris
PlasmaPlasma
WindowGlassWindowGlass
SurfaceSurface
Oversimplified&AccentuatedOversimplified&Accentuated
LuminosityLuminosity
LayerMicaUILayerMicaUI
FluidFluid
TintedGlassTintedGlass
TaskbarToStatusbarTaskbarToStatusbar
UltraWideFriendlyUltraWideFriendly
LiquidGlassLiquidGlass
LiquidGlass (Legacy)LiquidGlass (Legacy)
BorderlessBorderless
Command CenterCommand Center
FluentGlassFluentGlass
OS26 Liquid GlassOS26 Liquid Glass
FrostyGlassFrostyGlass
FrostedAcrylicFrostedAcrylic
PillsPills
BlobBlob
Minecraft HotbarMinecraft Hotbar
One UI 8.5One UI 8.5

General

Taskbar size

Use the Taskbar height and icon size mod.

Taskbar background

Target:

Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill

Style:

Fill=<color>

Replace <color> with the desired color. See colors section for all options (e.g. if you want blurred background effect).

Note

There's a known limitation with AcrylicBrush which only works if there's a single taskbar. For details, refer to Acrylic effect as color.

Note

For some themes, a different target has to be used to customize the taskbar background:

  • The WinXP theme spans the taskbar border over the full taskbar height. To customize the background, use the Rectangle#BackgroundStroke target.
  • The DockLike theme hides the standard taskbar background element. To customize the background, use the Grid#RootGrid target and the Background=<color> style.

Taskbar border

Target:

Rectangle#BackgroundStroke

It can be customized in the same way as the background, see Taskbar background.

Thumbnail preview background

Target:

Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill

Style:

Fill=<color>

Tasklist + System tray grouped alignment

Original Author: CryptoProgenitor

Note

Useful for dock-like layouts to ensure the task list and system tray share the same alignment no matter the size or position of the taskbar, examples could be seen in the UltraWideFriendly theme and the Borderless theme.

Target:

ScrollViewer > ScrollContentPresenter > Border > Grid

Style:

ColumnDefinitions:=<ColumnDefinitionCollection><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></ColumnDefinitionCollection>

Target:

Taskbar.TaskbarFrame

Style:

Grid.Column=1

Target:

SystemTray.SystemTrayFrame

Style:

Grid.Column=1

Task list

Start button image

Target:

Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Grid > Border#BackgroundElement, Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement

Style:

Background:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />

Target:

Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Grid > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon, Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon

Style:

Visibility=Collapsed

Replace <image> with your own image, a local file path or a URL, for example:

  • Windows 10: https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/OrbWin10.png.
  • Windows XP: https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/OrbWinXP.png (use with Stretch="None").

To set a different image for each Start button state - normal, hovered, pressed - refer to this comment.

Hide the start button

Target:

Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]

Style:

Visibility=Collapsed

Task list buttons size

Use the Taskbar height and icon size mod.

Task list buttons corner radius

Targets:

Taskbar.ExperienceToggleButton

Taskbar.SearchBoxButton

Taskbar.TaskListButton

Style:

CornerRadius=<radius>

Replace <radius> with the desired radius. A larger value will make the corners more rounded. Default: 4.

Task list labels

Various task list label customizations are available in the Taskbar Labels for Windows 11 mod.

Task list labels font

Target:

TextBlock#LabelControl

Style:

FontFamily=<font>

Replace <font> with the desired font. For a list of fonts that are shipped with Windows 11, refer to this page.

Task list running indicator

Target:

Grid#IconPanel@RunningIndicatorStates > Rectangle#RunningIndicator, Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator

Various styles can be applied to the running indicator. Here are some examples:

Styles:

Fill=#FFED7014

Height=2

Width=12

Fill@ActiveRunningIndicator=Red

Width@ActiveRunningIndicator=20

The following visual states1 can be used:

  • ActiveRunningIndicator
  • InactiveRunningIndicator
  • RequestingAttentionRunningIndicator

Some customizations for the running indicator are available in the Taskbar Labels for Windows 11 mod.

Notification area (system tray)

Tray overflow background

Target:

Border#OverflowFlyoutBackgroundBorder

Style:

Background=<color>

Tray icons size

Target:

SystemTray.ImageIconContent > Grid#ContainerGrid > Image

Styles:

Width=<size>

Height=<size>

Replace <size> with the desired size. Default: 16.

Tray icons size (system icons)

Target:

SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock

Style:

FontSize=<size>

Replace <size> with the desired size. Default: 32.

Tray icons spacing

Target:

SystemTray.NotifyIconView#NotifyItemIcon

Style:

MinWidth=<width>

Replace <width> with the desired width for the icon and the spacing. Default: 32.

Tray icons padding

Target:

SystemTray.ImageIconContent > Grid#ContainerGrid

Style:

Padding=<padding>

To reduce the spacing even more, replace <padding> with the desired padding. Default: 4,0.

Tray icons padding (system icons)

Target:

SystemTray.TextIconContent > Grid#ContainerGrid

Style:

Padding=<padding>

Replace <padding> with the desired padding. Default: 4,0.

Hide the network icon

Target:

SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid

Style:

Visibility=Collapsed

Hide the volume icon

Target:

SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[2] > SystemTray.IconView > Grid > Grid

Style:

Visibility=Collapsed

Chevron icon width

Target:

SystemTray.ChevronIconView

Style:

MinWidth=<width>

Replace <width> with the desired width. Default: 32.

Clock

Clock customizations are available in the Taskbar Clock Customization mod.

Hide the notification bell icon

Target:

SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent

Style:

Visibility=Collapsed

Copilot button image

Target:

ContentPresenter#ContentPresenter > Grid#ContentGrid > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#LottieIcon

Style:

Visibility=Collapsed

Target:

SystemTray.CopilotIcon#CopilotIcon > Grid#ContainerGrid > Border#BackgroundBorder

Style:

Background:=<ImageBrush Stretch="None" ImageSource="<image>" />
  • Copilot icon without preview label: https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/CopilotWithoutPreview.png.
  • Old Copilot icon: https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/CopilotOld.png.

Hide the "Show Desktop" button

Target:

SystemTray.Stack#ShowDesktopStack

Style:

Visibility=Collapsed

Hide the entire system tray

Target:

StackPanel#SystemTrayFrameGrid, Grid#SystemTrayFrameGrid

Style:

Visibility=Collapsed

Alt+Tab

Alt+Tab background

Target:

WindowsInternal.ComposableShell.Experiences.Switcher.AltTab > Grid#ModalRootGrid > Border#BackgroundElement

Style:

Background=Transparent

Target:

WindowsInternal.ComposableShell.Experiences.Switcher.AltTab > Grid#ModalRootGrid > Border#BackgroundElement > WindowsInternal.ComposableShell.Experiences.Switcher.SwitchItemList

Style:

Background=<color>

Note

The inner element background is customized, and the outer element background is made transparent. Without this, Alt+Tab loses mouse interactivity and becomes unclickable.

Task view

Task view background

Target:

Windows.UI.Xaml.Controls.Border#BackgroundDimmingLayer

Style:

Background=<color>

Hide virtual desktops

Target:

WindowsInternal.ComposableShell.Experiences.Switcher.VirtualDesktopBarElement#VirtualDesktopBar

Style:

Visibility=Collapsed

Volume popup

Slider thickness

Target:

Windows.UI.Xaml.Shapes.Rectangle#HorizontalTrackRect

Style:

Height=<value>

Transforms

You can use transformation styles to translate, rotate, scale, or skew elements.

Tip

Should I use RenderTransform or Transform3D?

For 2D transformations, it is best to stick to RenderTransform in most cases. Using Transform3D for 2D transformations can cause elements to become blurry. For 3D transformations, you must use Transform3D.

Tip

You can mix and match transformations when using Transform3D! You can also use RenderTransform and Transform3D together.

For example: Transform3D:=<CompositeTransform3D ScaleX="1.5" TranslateY="-15" RotationZ="15" />

Translate

RenderTransform:=<TranslateTransform X="15" Y="-15" />

-- or --

Transform3D:=<CompositeTransform3D TranslateX="15" TranslateY="-15" TranslateZ="-15" />

Rotate

RenderTransform:=<RotateTransform Angle="15" />

-- or --

Transform3D:=<CompositeTransform3D RotationX="-15" RotationY="15" RotationZ="-15" />
  • X: 3D vertical rotation.
  • Y: 3D horizontal rotation.
  • Z: 2D rotation.

Scale

RenderTransform:=<ScaleTransform ScaleX="1.5" ScaleY="-1.5" />

-- or --

Transform3D:=<CompositeTransform3D ScaleX="-1.5" ScaleY="1.5" ScaleZ="-1.5" />

Skew

RenderTransform:=<SkewTransform AngleX="-15" AngleY="15" />

Other properties and attributes

  • Applies to Rotate, Scale and Skew:

    • CenterX: Offsets the transform's origin on the X axis.
    • CenterY: Offsets the transform's origin on the Y axis.
    • CenterZ: Offsets the transform's origin on the Z axis. (Only for Transform3D)

    Example:

    RenderTransform:=<RotateTransform Angle="15" CenterX="10" CenterY="20" />

  • RenderTransformOrigin

    • Applies to RenderTransform only, Transform3D does not support this attribute. It is a separate attribute and is not set inside of the RenderTransform like CenterX/Y/Z.
    • Sets the transform origin relative to its target's width and height. Format is X,Y and both numbers range from 0-1.

    Example:

    RenderTransformOrigin=0.5,0.5

    This centers the transform's origin.

  • TransformGroup

    • Applies to RenderTransform only, Transform3D does not support this attribute. It is a separate attribute and is not set inside of the RenderTransform like CenterX/Y/Z.
    • Allows you to combine RenderTransforms together into one style, mimicking Transform3D's functionality.

    Example:

    RenderTransform:=<TransformGroup><RotateTransform Angle="15" /><TranslateTransform X="15" Y="-15" /></TransformGroup>

Colors

In the following examples, we're going to use Fill as an example, but this also works for other properties that accept colors, like Background.

Solid color

Fill=<color>

Replace <color> with the desired color.

A color can be a name (e.g. Red) or a hex code (e.g. #FF0000).

The color can be semi-transparent (e.g. #80FF0000). To have a fully transparent background, use Transparent.

Accent colors

A color can also be a ThemeResource or StaticResource. There are many such styles built into Windows.

Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />

Accent colors have different lightness available, like SystemAccentColorLight2 or SystemAccentColorDark1. The word Light or Dark is appended at the end with a number ranging from 1 to 3. Check out the official Microsoft docs for all variations.

Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColorDark2}" Opacity="0.5" />

Transparent color

To have a fully transparent background, use the following style:

Fill=Transparent

Acrylic effect as color

Note

There's a known limitation with AcrylicBrush which only works if there's a single taskbar. The following workarounds are available for multiple taskbars:

In order to have an acrylic effect (a blurred background), you can use AcrylicBrush. It comes with TintOpacity, which defines how much of the color needs to be applied.

Fill:=<AcrylicBrush TintColor="Black" TintOpacity="0.8" />

You can also mix acrylic with a variation of an accent color for a more dynamic look that fits the current theme.

Fill:=<AcrylicBrush TintColor="{ThemeResource SystemAccentColorDark2}" TintOpacity="0.3" />

WindhawkBlur effect as color

An alternative to Acrylic is the mod's own blur implementation called WindhawkBlur. It differs from Acrylic because it has a customizable blur radius and has fewer bugs (e.g. https://github.com/ramensoftware/windhawk-mods/issues/742).

Note

WindhawkBlur does not currently support color names (e.g. Red) or the FallbackColor property.

  • BlurAmount: Radius of blur effect (set to 30 to mimic Acrylic).
  • TintLuminosityOpacity: Shifts pixel luminance towards the tint color's luminance. Range: 0.0 to 1.0.
  • TintSaturation: Controls the saturation of the blurred content. 1.0 is unchanged, 0.0 is fully desaturated (grayscale).
  • NoiseOpacity: Adds a procedural noise texture overlay. Controls how visible the noise is (0.0 to 1.0).
  • NoiseDensity: Controls the granularity of the noise texture (defaults to 1.0).

Hex color

Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80ff0000" />

Fill:=<WindhawkBlur BlurAmount="10" TintColor="#ff0000" TintOpacity="0.5" />

These examples set a blur that is tinted with red at 50% opacity. Both versions have the same effect.

  • TintColor: Hex color in #AARRGGBB or #RRGGBB format that is applied to the blur.
  • TintOpacity: Opacity of the color that overrides the alpha of TintColor.

Tip

There is no need to specify a TintOpacity value if your TintColor has an alpha value.

ThemeResource color

<WindhawkBlur BlurAmount="10" TintColor="{ThemeResource SystemAccentColor}" TintOpacity="0.5"/>
  • TintColor: ThemeResource color, such as SystemAccentColor.
  • TintOpacity: Overrides the opacity of the ThemeResource color.

Mica effect as color

Note

Unfortunately, it is not possible to set a Mica effect at this time with any of Windhawk's styler mods.

Gradient as color

The background can also be a gradient. For example, to have a gradient from yellow to red to blue to lime green, use the following style:

Fill:=<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"><GradientStop Color="Yellow" Offset="0.0" /><GradientStop Color="Red" Offset="0.25" /><GradientStop Color="Blue" Offset="0.75" /><GradientStop Color="LimeGreen" Offset="1.0" /></LinearGradientBrush>

Image as color

The background can also be an image:

Fill:=<ImageBrush Stretch="UniformToFill" ImageSource="<image>" />

Replace <image> with your own image, a URL or a local file path.

Footnotes

  1. See Finding targets on how to use UWPSpy to find all of the available visual states for an element ↩