Login page CSS

CSS classes to target login page components.

Overview

With the login page CSS you can target the below components with full component coverage:

• Login form section

• Input fields and labels

• Buttons and actions

• Branding message and imagery

• Notification containers

Briefly, this is how a branded login page looks like with Ubidots native CSS styling:

With the below CSS stylesheet, the login page can be changed into this:

Login CSS stylesheet

/* TYPOGRAPHY */
.login__title,
.login__label,
.login__input,
.login__button,
.login__terms-text,
.login__custom-message {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

/* BACKGROUND */

.login__wrapper {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
}

.login__background {
  background: linear-gradient(135deg, 
    #000000 0%, 
    #0d2d1d 25%,
    #1a4d32 50%, 
    #0d2d1d 75%,
    #000000 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: none;
}

/* CONTAINER */

.login__container {
  background: rgba(12, 12, 12, 0.5);
  border: 1px solid rgba(45, 189, 104, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 80px rgba(45, 189, 104, 0.1);
  backdrop-filter: blur(24px) saturate(180%);
}

/* FORM SECTION */

.login__section--form {
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 0.9375rem 0 0 0.9375rem;
  overflow: visible;
}

.login__section--form::before {
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(45, 189, 104, 0.6) 50%, 
    transparent 100%);
}

.login__section--form::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 30%,
    rgba(45, 189, 104, 0.02) 100%);
  border-radius: 0.9375rem 0 0 0.9375rem;
  pointer-events: none;
}

/* LOGO */

.login__logo-link {
  display: block;
  text-align: center;
  margin-bottom: 1.75rem;
}

.login__logo-image {
  width: 200px;
  height: auto;
}

/* IMAGE SECTION */

.login__section--image {
  backdrop-filter: none;
  overflow: hidden;
  border-radius: 0 0.9375rem 0.9375rem 0;
  background-size: cover;
  background-position: center;
}

.login__section--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* TITLE */

.login__title {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* FORM */

.login__form::before {
  content: 'Welcome back';
  display: block;
  color: #E3E3E3;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  text-align: center;
  background: linear-gradient(135deg, #E3E3E3 0%, #2DBD68 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login__form::after {
  content: 'Enter your credentials to access your account';
  display: block;
  color: rgba(227, 227, 227, 0.6);
  font-size: 0.9375rem;
  font-weight: 400;
  margin-bottom: 2rem;
  margin-top: -0.5rem;
}

/* LINKS */

a {
  color: #2DBD68;
  transition: color 0.2s ease;
  font-weight: 500;
  text-decoration: none;
}

a:hover {
  color: #3DD378;
  text-decoration: underline;
}

.login__forgot-link {
  color: #2DBD68;
  transition: color 0.2s ease;
  font-weight: 500;
  text-decoration: none;
}

.login__forgot-link:hover {
  color: #3DD378;
  text-decoration: underline;
}

/* LABELS */

.login__label {
  color: rgba(227, 227, 227, 0.7);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/* INPUT FIELDS */

.login__input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(45, 189, 104, 0.2);
  color: #E3E3E3;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  font-weight: 400;
  font-size: 0.9375rem;
}

.login__input::placeholder {
  color: rgba(227, 227, 227, 0.35);
  font-weight: 300;
}

.login__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(45, 189, 104, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 189, 104, 0.15),
              0 4px 20px rgba(45, 189, 104, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ICONS */

.login__icon {
  color: rgba(227, 227, 227, 0.5);
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 1rem;
}

.login__icon:hover {
  color: #2DBD68;
}

.login__icon[data-tooltip]::after {
  content: attr(data-tooltip);
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(45, 189, 104, 0.3);
  color: #fff;
  padding: 0.3125rem;
  border-radius: 0.25rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.login__icon:hover[data-tooltip]::after {
  opacity: 1;
}

/* BUTTON */

.login__button {
  background: linear-gradient(135deg, 
    rgba(45, 189, 104, 0.9) 0%, 
    rgba(37, 160, 88, 0.9) 100%);
  color: #000000;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(45, 189, 104, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(45, 189, 104, 0.6);
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: fadeInUp 0.6s ease backwards;
  animation-delay: 0.3s;
}

.login__button::before {
  display: block;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2) 0%, 
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.login__button::after {
  display: block;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.login__button:hover {
  background: linear-gradient(135deg, 
    rgba(45, 189, 104, 1) 0%, 
    rgba(37, 160, 88, 1) 100%);
  box-shadow: 0 6px 30px rgba(45, 189, 104, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(45, 189, 104, 0.8);
}

.login__button:hover::after {
  opacity: 1;
}

.login__button:disabled {
  background: rgba(60, 60, 60, 0.3);
  color: rgba(227, 227, 227, 0.3);
  border-color: rgba(227, 227, 227, 0.1);
  box-shadow: none;
}

.login__button:disabled:hover {
  background: rgba(60, 60, 60, 0.3);
}

.login__button-text {
  display: inline;
}

.login__button-loader {
  font-size: 1.5rem;
  color: #000000;
  display: none;
}

.login__button--loading .login__button-loader {
  display: inline-block;
}

/* FOOTER */

.login__terms-text {
  color: rgba(227, 227, 227, 0.5);
  font-size: 0.75rem;
  font-weight: 400;
  font-family: "Nunito", sans-serif;
}

.login__terms-link {
  color: rgba(45, 189, 104, 0.9);
  font-weight: 500;
  text-decoration: none;
}

.login__terms-link:hover {
  color: #3DD378;
  text-decoration: underline;
}

.login__custom-message {
  color: #E3E3E3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-family: "Inter", sans-serif;
  font-size: 1.5625rem;
}

/* FEEDBACK */

#loader {
  color: #000000;
}

.font-error {
  color: #ff6b6b;
  font-weight: 400;
  background: rgba(255, 107, 107, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 107, 107, 0.3);
  backdrop-filter: blur(10px);
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  margin-top: 2rem;
  max-width: 23.875rem;
}

/* RESPONSIVE DESIGN */

@media (min-width: 48rem) {
  .login__section--form {
    width: 35%;
    order: 1;
  }
  
  .login__section--image {
    width: 65%;
    order: 2;
    display: flex;
  }
}

/* INPUT GROUPS */

.login__input-group-container {
  gap: 1.25rem;
}

.login__input-group {
  animation: fadeInUp 0.6s ease backwards;
}

.login__input-group:nth-child(1) {
  animation-delay: 0.1s;
}

.login__input-group:nth-child(2) {
  animation-delay: 0.2s;
}

.login__input-group:nth-child(3) {
  animation-delay: 0.3s;
}

/* ANIMATIONS */

@keyframes fadeInUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Login Component Classes Reference

Class Hierarchy

The login page follows a strict hierarchical BEM structure with the root container login__viewport containing all sub-elements.

login__viewport (Root)
├── login__notification-container
└── login__wrapper
    ├── login__background
    │   └── login__background--app (modifier)
    └── login__container
        ├── login__section
        │   ├── login__section--form (modifier)
        │   ├── login__section--image (modifier)
        │   └── login__section--image-app (modifier)
        │
        ├── [LEFT SIDE - Form Section]
        │   ├── login__logo-link
        │   │   └── login__logo-image
        │   ├── login__title
        │   └── login__form
        │       ├── login__input-group-container
        │       │   └── login__input-group
        │       │       ├── login__input-group--workspace (modifier)
        │       │       ├── login__label
        │       │       ├── login__input
        │       │       └── login__input-wrapper
        │       │           ├── login__input-wrapper--icon (modifier)
        │       │           ├── login__input
        │       │           └── login__icon
        │       │               └── login__icon--eye (modifier)
        │       ├── login__forgot-link
        │       ├── login__actions-container
        │       │   └── login__button
        │       │       ├── login__button--loading (modifier)
        │       │       ├── login__button-text
        │       │       └── login__button-loader
        │       └── login__terms-container
        │           └── login__terms-text
        │               └── login__terms-link
        │
        └── [RIGHT SIDE - Image Section]
            └── login__custom-message

Classes by Section

Outer Container Classes

The parent class for the outer structure is login__viewport.

1. login__viewport - Root container for entire login page

2. login__notification-container - Container for notifications/alerts

3. login__wrapper - Main wrapper around login experience

4. login__background - Background layer

   1. login__background--app - App-specific background modifier

5. login__container - Main login container with border and shadow

---

Section Classes

The parent class for the sections is login__container.

1. login__section - Base section container

   1. login__section--form - Form section (LEFT SIDE)

   2. login__section--image - Image/branding section (RIGHT SIDE)

   3. login__section--image-app - App-specific image section modifier

---

Logo & Branding

The parent class for the logo is login__section--form.

1. login__logo-link - Logo link wrapper

   1. login__logo-image - Logo image element

---

Title

The parent class for the title is login__section--form.

1. login__title - Main login heading

---

Form Wrapper

The parent class for the form is login__section--form.

1. login__form - Form wrapper element

---

Input Groups

The parent class for the input groups is login__form.

1. login__input-group-container - Container for all input groups

   1. login__input-group - Individual input group wrapper

      1. login__input-group--workspace - Workspace input group modifier

      2. login__label - Input label element

      3. login__input - Input field element

      4. login__input-wrapper - Wrapper for inputs with icons

         1. login__input-wrapper--icon - Modifier for icon wrapper

         2. login__input - Input field element

         3. login__icon - Icon element

            1. login__icon--eye - Eye icon modifier (password visibility toggle)

---

Forgot Password Link

The parent class for the forgot password link is login__form.

1. login__forgot-link - Forgot password link

---

Actions Container

The parent class for the actions container is login__form.

1. login__actions-container - Container for action buttons

   1. login__button - Login button element

      1. login__button--loading - Loading state modifier

      2. login__button-text - Button text element

      3. login__button-loader - Loading spinner element

---

Terms Container

The parent class for the terms container is login__form.

1. login__terms-container - Terms section container

   1. login__terms-text - Terms text element

      1. login__terms-link - Terms link element

---

Custom Message

The parent class for the custom message is login__section--image.

1. login__custom-message - Custom branding message (tagline/message on right panel)

CSS Properties Guide

Safe to Modif

• color - Text colors

• background - Background colors and gradients

• border - Border styles and colors

• border-radius - Corner rounding

• font-family - Font choices

• font-size - Text sizes

• font-weight - Text weights

• box-shadow - Shadow effects

• filter - Visual filters (grayscale, blur, etc.)

• backdrop-filter - Blur and glass morphism effects

• padding - Internal spacing

• margin - External spacing

• transform - Translations, rotations, scaling

• transition - Animation transitions

• opacity - Transparency

• width - Element width

• height - Element height

Properties to Avoid

• position: absolute - May break layout (use relative positioning instead)

• !important - Security restriction

• behavior - Security restriction

• expression - Security restriction

• javascript: - Security restriction

• data:text - Security restriction

• vbscript: - Security restriction

• file: - Security restriction

• ftp: - Security restriction

Responsive Design Considerations

The login page is mobile-responsive by default. Key breakpoints:

• Mobile (< 768px): Single column layout, full width form

• Tablet (768px+): Split layout appears, form on left, branding on right

• Desktop (72.5rem+): Full featured layout with max constraints

Keep these breakpoints in mind when customizing:

@media (min-width: 48rem) {
  .login__section--form {
    width: 50%;
  }
  
  .login__section--image {
    display: flex;
    width: 50%;
  }
}

Font Customization

Import custom fonts and apply globally:

:root {
  --font-family-primary: "Your Custom Font", sans-serif;
}

*:not([role="icon"]) {
  font-family: var(--font-family-primary);
}

Transitions and Animations

Use CSS variables for consistent animation timing:

:root {
  --transition-fast: 0.3s ease;
  --transition-normal: 0.2s ease;
}

.login__input {
  transition: border-color var(--transition-fast);
}

.login__button {
  transition: background-color var(--transition-fast), 
              box-shadow var(--transition-fast);
}