Backdrop · Sign-in theme
Backdrop
Your own picture behind the whole page, dimmed a little, with a frosted glass card on top. It comes with a dusk mountain scene; give it any image address to use yours. Organization admins can install it.
Verified by CasdoorDarkBackground imageGlass
What it sets
| Theme | dark |
|---|---|
| Border radius | 12px |
| Form position | Center |
| Custom CSS | Yes |
| Custom CSS Mobile | Yes |
| Background URL | Yes |
Everything is on the application's UI Customization tab in Casdoor, so you can keep adjusting it after applying the theme.
Apply it to an application
- Enter the application below, adjust the theme's settings, and copy the JSON.
- In the Casdoor console, open Applications, edit that application, click Import JSON at the top, paste the JSON and click OK.
- Click Save. The sign-in page uses the theme from the next visit.
{
"name": "<application name>",
"organization": "<organization>",
"themeData": {
"themeType": "dark",
"colorPrimary": "#f97316",
"borderRadius": 12,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formBackgroundUrl": "https://cdn.jsdelivr.net/gh/casdoor/casdoor-integrations@master/integrations/theme/backdrop/background.jpg",
"formBackgroundUrlMobile": "https://cdn.jsdelivr.net/gh/casdoor/casdoor-integrations@master/integrations/theme/backdrop/background.jpg",
"formCss": "<style>\n.login-background {\n color-scheme: dark;\n --background: 230 30% 10%;\n --foreground: 0 0% 100%;\n --card: 230 30% 14%;\n --card-foreground: 0 0% 100%;\n --popover: 230 30% 14%;\n --popover-foreground: 0 0% 100%;\n --muted: 230 20% 22%;\n --muted-foreground: 0 0% 85%;\n --accent: 230 20% 26%;\n --accent-foreground: 0 0% 100%;\n --border: 230 20% 40%;\n --input: 230 20% 50%;\n --ring: 0 0% 100%;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n background-color: #14162e;\n}\n.login-background::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(8, 10, 28, 0.25) 0%, rgba(8, 10, 28, 0.5) 100%);\n}\n.login-topbar,\n.login-content,\n#footer {\n position: relative;\n z-index: 1;\n}\n.login-content > div {\n max-width: 430px;\n}\n.login-panel {\n border-radius: 24px;\n}\n.login-topbar button {\n color: #ffffff;\n}\n.login-panel {\n border: 1px solid rgba(255, 255, 255, 0.28);\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);\n backdrop-filter: blur(22px) saturate(150%);\n -webkit-backdrop-filter: blur(22px) saturate(150%);\n}\n.signin-methods > div {\n border: 1px solid rgba(255, 255, 255, 0.18);\n background: rgba(255, 255, 255, 0.1);\n}\n.signin-methods [role='tab'] {\n color: rgba(255, 255, 255, 0.75);\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: rgba(255, 255, 255, 0.92) !important;\n color: #14162e;\n box-shadow: none !important;\n}\n.login-form label {\n color: rgba(255, 255, 255, 0.92);\n font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 46px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: rgba(255, 255, 255, 0.6);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #ffffff;\n background: rgba(255, 255, 255, 0.18);\n box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);\n}\n.login-password button {\n color: rgba(255, 255, 255, 0.8);\n}\n.login-form [role='checkbox'] {\n border-color: rgba(255, 255, 255, 0.7);\n border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #f97316;\n border-color: #f97316;\n color: #ffffff;\n}\n.login-form a {\n color: #ffffff;\n font-weight: 600;\n text-decoration: underline;\n text-decoration-color: rgba(255, 255, 255, 0.5);\n text-underline-offset: 3px;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 12px;\n background: #f97316;\n color: #ffffff;\n font-size: 15px;\n font-weight: 600;\n box-shadow: 0 12px 28px -10px #f97316;\n}\n.login-form .login-button:hover {\n background: #f97316;\n filter: brightness(1.1);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: rgba(255, 255, 255, 0.85);\n}\n#footer {\n background: rgba(10, 12, 30, 0.45);\n color: rgba(255, 255, 255, 0.85);\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n.login-background {\n color-scheme: dark;\n --background: 230 30% 10%;\n --foreground: 0 0% 100%;\n --card: 230 30% 14%;\n --card-foreground: 0 0% 100%;\n --popover: 230 30% 14%;\n --popover-foreground: 0 0% 100%;\n --muted: 230 20% 22%;\n --muted-foreground: 0 0% 85%;\n --accent: 230 20% 26%;\n --accent-foreground: 0 0% 100%;\n --border: 230 20% 40%;\n --input: 230 20% 50%;\n --ring: 0 0% 100%;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n background-color: #14162e;\n}\n.login-background::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(8, 10, 28, 0.25) 0%, rgba(8, 10, 28, 0.5) 100%);\n}\n.login-topbar,\n.login-content,\n#footer {\n position: relative;\n z-index: 1;\n}\n.login-panel {\n border-radius: 20px;\n}\n.login-topbar button {\n color: #ffffff;\n}\n.login-panel {\n border: 1px solid rgba(255, 255, 255, 0.28);\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);\n backdrop-filter: blur(22px) saturate(150%);\n -webkit-backdrop-filter: blur(22px) saturate(150%);\n}\n.signin-methods > div {\n border: 1px solid rgba(255, 255, 255, 0.18);\n background: rgba(255, 255, 255, 0.1);\n}\n.signin-methods [role='tab'] {\n color: rgba(255, 255, 255, 0.75);\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: rgba(255, 255, 255, 0.92) !important;\n color: #14162e;\n box-shadow: none !important;\n}\n.login-form label {\n color: rgba(255, 255, 255, 0.92);\n font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 46px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: rgba(255, 255, 255, 0.6);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #ffffff;\n background: rgba(255, 255, 255, 0.18);\n box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);\n}\n.login-password button {\n color: rgba(255, 255, 255, 0.8);\n}\n.login-form [role='checkbox'] {\n border-color: rgba(255, 255, 255, 0.7);\n border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #f97316;\n border-color: #f97316;\n color: #ffffff;\n}\n.login-form a {\n color: #ffffff;\n font-weight: 600;\n text-decoration: underline;\n text-decoration-color: rgba(255, 255, 255, 0.5);\n text-underline-offset: 3px;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 12px;\n background: #f97316;\n color: #ffffff;\n font-size: 15px;\n font-weight: 600;\n box-shadow: 0 12px 28px -10px #f97316;\n}\n.login-form .login-button:hover {\n background: #f97316;\n filter: brightness(1.1);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: rgba(255, 255, 255, 0.85);\n}\n#footer {\n background: rgba(10, 12, 30, 0.45);\n color: rgba(255, 255, 255, 0.85);\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>"
}More sign-in themes
View all
Aurora
Sign-in themeA pastel mesh of color tinted by your accent behind a frosted glass card, with soft rounded fields and a gradient button. CSS only, so organization admins can install it.
LightGlassGradient
Bare
Sign-in themeNothing but the form: no card, no background, a small left-aligned logo, quiet text tabs, hairline fields and a round button, with plenty of white space. CSS only, so organization admins can install it.
LightMinimalNo card
Blueprint
Sign-in themeA technical drawing: white lines on blueprint-blue grid paper, a framed form labelled like a figure, dashed fields and a drafting typeface. It loads the Share Tech Mono font from Google Fonts. Organization admins can install it.
DarkTechnicalMonospace