admin

Please wait...

blur_on Glassmorphism Theme

Kuber now supports a premium Glassmorphism layout style. This theme utilizes frosted glass effects, semi-transparent panels, and vibrant dynamic backgrounds to create a modern, high-end dashboard experience.

How to Enable

To enable the Glassmorphism theme by default, update the config.service.ts file located at src/app/config/config.service.ts: 

this.configData = {
    layout: {
        // ... other settings
        layout_style: 'glassmorphism', // options: solid & glassmorphism
        glassmorphism_bg_color: 'purple-blue', // choose your preferred background
    }
}
info
Note: You can also toggle Glassmorphism on/off dynamically from the right sidebar settings panel — no code change required after initial setup.

Background Options

We provide 7 curated color palettes for the Glassmorphism background. Each palette includes dynamic gradients that enhance the "frosted glass" look.

Palette Name Description
purple-blue A professional blend of violet and deep blue shades. (Default)
sunset Warm orange and pink tones for a soft, elegant look.
mint Fresh green and teal gradients for a clean, modern feel.
candy Sweet pink and coral tones for a vibrant, playful aesthetic.
ocean Deep teal and light blue for a calm, trustworthy aesthetic.
yellow Bright yellow and amber gradients for a high-energy interface.
lush Vibrant green and lime for a fresh, nature-inspired palette.

Architecture

The glassmorphism theme is powered by a dedicated SCSS file:

  • SCSS Source: src/assets/scss/theme/_glassmorphism.scss — contains all glass effect styles
  • Config: src/app/config/config.service.ts — toggle between solid and glassmorphism layout styles
  • CSS Class: The class layout-glassmorphism is applied to the <body> element when active

Features of Glass Theme

  • Frosted Glass Panels: Cards, modals, tables, and widgets use semi-transparent backgrounds with backdrop-filter: blur(20px).
  • Dynamic Background Gradients: The background features smooth animated gradients with 7 color schemes to choose from.
  • Light & Dark Mode Support: The glass effect automatically adjusts opacity and tint based on the selected variant — dark glass uses deeper, more opaque tones.
  • Premium Components: Tables (Bootstrap, Angular Material, NGX Datatable), charts, forms, navigation, and dropdowns have been specifically refactored for glass backgrounds.
  • Sidebar & Header Support: Both vertical and horizontal sidebar layouts support the glass effect, including the settings panel.
  • KPI Cards: All KPI and stat cards include special glass overrides to maintain readability while preserving the frosted aesthetic.
  • Chat & AI Widgets: Chat interfaces, insight cards, and AI-powered widgets include dedicated glass styles.

Build Configurations

The build.js script includes glassmorphism settings for each build variant (light, dark, RTL, etc.):

const builds = [
  {
    baseHref: "/templates/admin/kuber/source/light/",
    settings: {
      layout: {
        layout_style: "solid",
        glassmorphism_bg_color: "purple-blue",
        // ...
      },
    },
  },
  // Dark, RTL, and other variants follow the same pattern
];