CasdoorMarketplace
Submit

Aurora · Sign-in theme

Aurora

A 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.

Verified by CasdoorLightGlassGradientCSS only
Apply this themeView source
Aurora sign-in page

What it sets

Themedefault
Border radius12px
Form positionCenter
Custom CSSYes
Custom CSS MobileYes

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

  1. Enter the application below, adjust the theme's settings, and copy the JSON.
  2. In the Casdoor console, open Applications, edit that application, click Import JSON at the top, paste the JSON and click OK.
  3. Click Save. The sign-in page uses the theme from the next visit.
{
  "name": "<application name>",
  "organization": "<organization>",
  "themeData": {
    "themeType": "default",
    "colorPrimary": "#7c3aed",
    "borderRadius": 12,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 2,
  "formCss": "<style>\n.login-background {\n  color-scheme: light;\n  --background: 250 100% 98%;\n  --foreground: 250 20% 14%;\n  --card: 0 0% 100%;\n  --card-foreground: 250 20% 14%;\n  --muted: 250 40% 96%;\n  --muted-foreground: 250 8% 40%;\n  --accent: 250 40% 95%;\n  --accent-foreground: 250 20% 14%;\n  --border: 250 30% 90%;\n  --input: 250 25% 86%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n}\n.login-background {\n  background: radial-gradient(at 50% -5%, color-mix(in srgb, #7c3aed 30%, transparent) 0%, transparent 50%), radial-gradient(at 10% 20%, #ffd3e6 0%, transparent 45%), radial-gradient(at 90% 15%, #c7e2ff 0%, transparent 45%), radial-gradient(at 82% 88%, #d8c7ff 0%, transparent 50%), radial-gradient(at 15% 90%, #c6f4e2 0%, transparent 45%), #f6f4ff;\n}\n.login-content > div {\n  max-width: 430px;\n}\n.login-panel {\n  border: 1px solid rgba(255, 255, 255, 0.75);\n  border-radius: 24px;\n  background: rgba(255, 255, 255, 0.55);\n  box-shadow: 0 24px 64px -12px rgba(80, 60, 160, 0.25);\n  backdrop-filter: blur(24px) saturate(160%);\n  -webkit-backdrop-filter: blur(24px) saturate(160%);\n}\n.signin-methods > div {\n  background: rgba(255, 255, 255, 0.5);\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 12px;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  border-radius: 9px;\n  background: #ffffff !important;\n}\n.login-form label {\n  color: #4a4560;\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.9);\n  border-radius: 12px;\n  background: rgba(255, 255, 255, 0.72);\n  font-size: 15px;\n  box-shadow: 0 1px 2px rgba(60, 40, 120, 0.06);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #7c3aed;\n  background: #ffffff;\n  box-shadow: 0 0 0 4px color-mix(in srgb, #7c3aed 20%, transparent);\n}\n.login-form [role='checkbox'] {\n  border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #7c3aed;\n  border-color: #7c3aed;\n  color: #ffffff;\n}\n.login-form a {\n  color: #7c3aed;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 46px;\n  border-radius: 12px;\n  background: linear-gradient(135deg, #7c3aed 0%, color-mix(in srgb, #7c3aed 55%, #ec4899) 100%);\n  color: #ffffff;\n  font-size: 15px;\n  font-weight: 600;\n  box-shadow: 0 10px 24px -8px color-mix(in srgb, #7c3aed 60%, transparent);\n}\n.login-form .login-button:hover {\n  background: linear-gradient(135deg, #7c3aed 0%, color-mix(in srgb, #7c3aed 55%, #ec4899) 100%);\n  opacity: 0.92;\n}\n#footer {\n  color: #6b6580;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>",
  "formCssMobile": "<style>\n.login-background {\n  color-scheme: light;\n  --background: 250 100% 98%;\n  --foreground: 250 20% 14%;\n  --card: 0 0% 100%;\n  --card-foreground: 250 20% 14%;\n  --muted: 250 40% 96%;\n  --muted-foreground: 250 8% 40%;\n  --accent: 250 40% 95%;\n  --accent-foreground: 250 20% 14%;\n  --border: 250 30% 90%;\n  --input: 250 25% 86%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n}\n.login-background {\n  background: radial-gradient(at 50% -5%, color-mix(in srgb, #7c3aed 30%, transparent) 0%, transparent 50%), radial-gradient(at 10% 20%, #ffd3e6 0%, transparent 45%), radial-gradient(at 90% 15%, #c7e2ff 0%, transparent 45%), radial-gradient(at 82% 88%, #d8c7ff 0%, transparent 50%), radial-gradient(at 15% 90%, #c6f4e2 0%, transparent 45%), #f6f4ff;\n}\n.login-panel {\n  border-color: rgba(255, 255, 255, 0.75);\n  border-radius: 20px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n}\n.signin-methods > div {\n  background: rgba(255, 255, 255, 0.5);\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 12px;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  border-radius: 9px;\n  background: #ffffff !important;\n}\n.login-form label {\n  color: #4a4560;\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.9);\n  border-radius: 12px;\n  background: rgba(255, 255, 255, 0.72);\n  font-size: 15px;\n  box-shadow: 0 1px 2px rgba(60, 40, 120, 0.06);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #7c3aed;\n  background: #ffffff;\n  box-shadow: 0 0 0 4px color-mix(in srgb, #7c3aed 20%, transparent);\n}\n.login-form [role='checkbox'] {\n  border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #7c3aed;\n  border-color: #7c3aed;\n  color: #ffffff;\n}\n.login-form a {\n  color: #7c3aed;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 46px;\n  border-radius: 12px;\n  background: linear-gradient(135deg, #7c3aed 0%, color-mix(in srgb, #7c3aed 55%, #ec4899) 100%);\n  color: #ffffff;\n  font-size: 15px;\n  font-weight: 600;\n  box-shadow: 0 10px 24px -8px color-mix(in srgb, #7c3aed 60%, transparent);\n}\n.login-form .login-button:hover {\n  background: linear-gradient(135deg, #7c3aed 0%, color-mix(in srgb, #7c3aed 55%, #ec4899) 100%);\n  opacity: 0.92;\n}\n#footer {\n  color: #6b6580;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>"
}

More sign-in themes

View all

Backdrop

Sign-in theme

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.

DarkBackground imageGlass

Bare

Sign-in theme

Nothing 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 theme

A 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