Waves · Sign-in theme

Waves

Name: Waves Sign-in theme for Casdoor
Author: casdoor

Friendly and round: three layers of waves in your color roll along the bottom of a light page, under a soft white card with pill-shaped fields and a rounded typeface. The waves are drawn in the CSS itself; the Nunito font comes from Google Fonts. Organization admins can install it.

Verified by CasdoorLightFriendlyIllustrationWeb font

Apply this theme View source

What it sets

Theme	default
Border radius	16px
Form position	Center
Custom CSS	Yes
Custom CSS Mobile	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.

OrganizationApplication nameAccent color

The waves, the button, links and focused fields.

{
  "name": "<application name>",
  "organization": "<organization>",
  "themeData": {
    "themeType": "default",
    "colorPrimary": "#0ea5e9",
    "borderRadius": 16,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 2,
  "formCss": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');\n.login-background {\n  color-scheme: light;\n  --background: 210 60% 98%;\n  --foreground: 222 47% 15%;\n  --card: 0 0% 100%;\n  --card-foreground: 222 47% 15%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222 47% 15%;\n  --muted: 210 50% 96%;\n  --muted-foreground: 215 20% 45%;\n  --accent: 210 50% 95%;\n  --accent-foreground: 222 47% 15%;\n  --border: 214 40% 90%;\n  --input: 214 40% 86%;\n  font-family: Nunito, ui-rounded, 'Segoe UI', system-ui, sans-serif;\n  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #0ea5e9 12%, #ffffff) 100%);\n  overflow: hidden;\n}\n.login-topbar,\n#footer {\n  position: relative;\n  z-index: 1;\n}\n.login-background::before,\n.login-background::after,\n.login-content::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  height: 46%;\n  background: #0ea5e9;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n.login-background::before {\n  opacity: 0.25;\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C220,260 420,80 720,150 C1000,215 1220,90 1440,170 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C220,260 420,80 720,150 C1000,215 1220,90 1440,170 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-background::after {\n  opacity: 0.5;\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,230 C260,150 460,290 760,215 C1040,145 1260,270 1440,200 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,230 C260,150 460,290 760,215 C1040,145 1260,270 1440,200 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-content::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,270 C300,220 560,310 860,262 C1100,224 1300,300 1440,255 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,270 C300,220 560,310 860,262 C1100,224 1300,300 1440,255 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-content > div {\n  position: relative;\n  z-index: 1;\n}\n.login-content > div {\n  max-width: 430px;\n}\n.login-panel {\n  border: none;\n  border-radius: 28px;\n  background: #ffffff;\n  box-shadow: 0 30px 70px -24px color-mix(in srgb, #0ea5e9 45%, rgba(15, 23, 42, 0.4));\n}\n.signin-methods > div {\n  border-radius: 999px;\n  background: color-mix(in srgb, #0ea5e9 8%, #f1f5f9);\n}\n.signin-methods [role='tab'] {\n  border-radius: 999px;\n  font-family: inherit;\n  font-weight: 700;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  color: #0ea5e9;\n}\n.login-form label {\n  color: #334155;\n  font-weight: 700;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 48px;\n  padding: 0 18px;\n  border: 1.5px solid #dbe4ee;\n  border-radius: 999px;\n  background: #f8fafc;\n  font-family: inherit;\n  font-size: 15px;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #0ea5e9;\n  background: #ffffff;\n  box-shadow: 0 0 0 4px color-mix(in srgb, #0ea5e9 18%, transparent);\n}\n.login-password button {\n  right: 8px;\n}\n.login-form [role='checkbox'] {\n  border-radius: 6px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #0ea5e9;\n  border-color: #0ea5e9;\n  color: #ffffff;\n}\n.login-form a {\n  color: #0ea5e9;\n  font-weight: 700;\n}\n.login-form .login-button {\n  height: 50px;\n  border-radius: 999px;\n  background: #0ea5e9;\n  color: #ffffff;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 800;\n  box-shadow: 0 12px 24px -10px #0ea5e9;\n}\n.login-form .login-button:hover {\n  background: #0ea5e9;\n  filter: brightness(1.08);\n}\n#footer {\n  color: #ffffff;\n  font-weight: 600;\n}\n#footer img {\n  filter: brightness(0) invert(1);\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>",
  "formCssMobile": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');\n.login-background {\n  color-scheme: light;\n  --background: 210 60% 98%;\n  --foreground: 222 47% 15%;\n  --card: 0 0% 100%;\n  --card-foreground: 222 47% 15%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222 47% 15%;\n  --muted: 210 50% 96%;\n  --muted-foreground: 215 20% 45%;\n  --accent: 210 50% 95%;\n  --accent-foreground: 222 47% 15%;\n  --border: 214 40% 90%;\n  --input: 214 40% 86%;\n  font-family: Nunito, ui-rounded, 'Segoe UI', system-ui, sans-serif;\n  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #0ea5e9 12%, #ffffff) 100%);\n  overflow: hidden;\n}\n.login-topbar,\n#footer {\n  position: relative;\n  z-index: 1;\n}\n.login-background::before,\n.login-background::after,\n.login-content::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  height: 30%;\n  background: #0ea5e9;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n.login-background::before {\n  opacity: 0.25;\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C220,260 420,80 720,150 C1000,215 1220,90 1440,170 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C220,260 420,80 720,150 C1000,215 1220,90 1440,170 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-background::after {\n  opacity: 0.5;\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,230 C260,150 460,290 760,215 C1040,145 1260,270 1440,200 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,230 C260,150 460,290 760,215 C1040,145 1260,270 1440,200 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-content::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,270 C300,220 560,310 860,262 C1100,224 1300,300 1440,255 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,270 C300,220 560,310 860,262 C1100,224 1300,300 1440,255 L1440,320 L0,320 Z'/%3E%3C/svg%3E\");\n}\n.login-content > div {\n  position: relative;\n  z-index: 1;\n}\n.login-content {\n  padding-bottom: 120px;\n}\n.signin-methods > div {\n  border-radius: 999px;\n  background: color-mix(in srgb, #0ea5e9 8%, #f1f5f9);\n}\n.signin-methods [role='tab'] {\n  border-radius: 999px;\n  font-family: inherit;\n  font-weight: 700;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  color: #0ea5e9;\n}\n.login-form label {\n  color: #334155;\n  font-weight: 700;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 48px;\n  padding: 0 18px;\n  border: 1.5px solid #dbe4ee;\n  border-radius: 999px;\n  background: #f8fafc;\n  font-family: inherit;\n  font-size: 15px;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #0ea5e9;\n  background: #ffffff;\n  box-shadow: 0 0 0 4px color-mix(in srgb, #0ea5e9 18%, transparent);\n}\n.login-password button {\n  right: 8px;\n}\n.login-form [role='checkbox'] {\n  border-radius: 6px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #0ea5e9;\n  border-color: #0ea5e9;\n  color: #ffffff;\n}\n.login-form a {\n  color: #0ea5e9;\n  font-weight: 700;\n}\n.login-form .login-button {\n  height: 50px;\n  border-radius: 999px;\n  background: #0ea5e9;\n  color: #ffffff;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 800;\n  box-shadow: 0 12px 24px -10px #0ea5e9;\n}\n.login-form .login-button:hover {\n  background: #0ea5e9;\n  filter: brightness(1.08);\n}\n#footer {\n  color: #ffffff;\n  font-weight: 600;\n}\n#footer img {\n  filter: brightness(0) invert(1);\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>"
}

More sign-in themes

View all

Aurora

Sign-in theme

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.

LightGlassGradient

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