Authentik Frosted Theme

A frosted-glass custom CSS theme for authentik.

Installation

1. Download theme.css and copy its entire contents.
2. In the authentik Admin interface, go to System → Brands.
3. Edit authentik Default or the Brand assigned to your domain.
4. Under Branding settings, replace the contents of Custom CSS with the downloaded stylesheet, then save the Brand.
5. Refresh the page. If an older version is still visible, perform a hard refresh or clear the browser cache.

Note

The theme was tested with authentik 2026.5.6. If you find a visual bug with another version or flow configuration, please open an issue.

Optional customization

Use the demo background

To use the Earth image shown in the screenshots:

1. Download flow.jpg.
2. In the Admin interface, go to Customization → Files and upload it.
3. Edit your Brand and select the uploaded image as its default flow background.

Match the interface shown in the screenshots

The following Brand attributes reproduce the dark background, three-column layout, and navigation options used for the screenshots. They are optional and are not required for the login theme.

Add them under System → Brands → your Brand → Attributes:

settings:
  theme:
    base: dark
    background: >
      background:
        radial-gradient(circle at 15% 10%, rgba(62, 132, 180, 0.16), transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(72, 79, 112, 0.12), transparent 35%),
        linear-gradient(135deg, #05070b 0%, #0a1018 55%, #080b10 100%);
      background-attachment: fixed;
  layout:
    type: 3-column
  navbar:
    userDisplay: name
  enabledFeatures:
    search: true
    settings: true
    apiDrawer: false
    applicationEdit: false
    notificationDrawer: false

Add text beside the Brand logo

The theme does not add a label by default. To display a domain or company name beside the logo, find this line in theme.css:

--iu-brand-label: none;

Replace none with a quoted label:

--iu-brand-label: "example.com";

Preview