Custom Login Page Design Tutorial

Overview

Create stunning, branded login pages that reflect your organization’s identity. This tutorial provides complete CSS examples and design patterns for modern, responsive login pages including gradients, animations, background images, and custom form styling.

Design Examples You’ll Create

• Modern gradient background login
• Full-screen background image login
• Minimal centered card design
• Dark mode login interface
• Animated floating labels
• Corporate brand-focused design

Design 1: Modern Gradient Login

Contemporary design with vibrant gradient and glassmorphism effects.

HTML Structure

<div class="gradient-login-wrapper">
<p>  <div class="login-card">
</p>
<p>    <div class="login-header">
</p>
<p>      <img src="/logo.png" alt="Company Logo">
</p>
<p>      <h2>Welcome Back</h2>
</p>
<p>      <p>Sign in to continue</p>
</p>
<p>    </div>
</p>

<p>    [attributes_login 
</p>
<p>      show_logo="no"
</p>
<p>      template="minimal"]
</p>
<p>  </div>
</p>
<p></div></p>

CSS Styling

/<em> Gradient Login Design </em>/
<p>.gradient-login-wrapper {
</p>
<p>    min-height: 100vh;
</p>
<p>    display: flex;
</p>
<p>    align-items: center;
</p>
<p>    justify-content: center;
</p>
<p>    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
</p>
<p>    padding: 20px;
</p>
<p>}
</p>

<p>.login-card {
</p>
<p>    background: rgba(255, 255, 255, 0.95);
</p>
<p>    backdrop-filter: blur(10px);
</p>
<p>    border-radius: 20px;
</p>
<p>    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
</p>
<p>    padding: 40px;
</p>
<p>    max-width: 420px;
</p>
<p>    width: 100%;
</p>
<p>}
</p>

<p>.login-header {
</p>
<p>    text-align: center;
</p>
<p>    margin-bottom: 30px;
</p>
<p>}
</p>

<p>.login-header img {
</p>
<p>    max-width: 120px;
</p>
<p>    margin-bottom: 20px;
</p>
<p>}
</p>

<p>.login-header h2 {
</p>
<p>    font-size: 28px;
</p>
<p>    color: #333;
</p>
<p>    margin-bottom: 8px;
</p>
<p>}
</p>

<p>.login-header p {
</p>
<p>    color: #666;
</p>
<p>    font-size: 14px;
</p>
<p>}
</p>

<p>/<em> Form Styling </em>/
</p>
<p>.attributes-login-form input[type="text"],
</p>
<p>.attributes-login-form input[type="password"] {
</p>
<p>    width: 100%;
</p>
<p>    padding: 15px;
</p>
<p>    border: 2px solid #e0e0e0;
</p>
<p>    border-radius: 10px;
</p>
<p>    font-size: 16px;
</p>
<p>    transition: all 0.3s ease;
</p>
<p>    margin-bottom: 15px;
</p>
<p>}
</p>

<p>.attributes-login-form input:focus {
</p>
<p>    border-color: #667eea;
</p>
<p>    outline: none;
</p>
<p>    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
</p>
<p>}
</p>

<p>.attributes-login-form button[type="submit"] {
</p>
<p>    width: 100%;
</p>
<p>    padding: 15px;
</p>
<p>    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
</p>
<p>    border: none;
</p>
<p>    border-radius: 10px;
</p>
<p>    color: white;
</p>
<p>    font-size: 16px;
</p>
<p>    font-weight: 600;
</p>
<p>    cursor: pointer;
</p>
<p>    transition: transform 0.2s ease;
</p>
<p>}
</p>

<p>.attributes-login-form button[type="submit"]:hover {
</p>
<p>    transform: translateY(-2px);
</p>
<p>    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
</p>
<p>}
</p>

<p>/<em> Responsive </em>/
</p>
<p>@media (max-width: 480px) {
</p>
<p>    .login-card {
</p>
<p>        padding: 30px 20px;
</p>
<p>    }
</p>
<p>}</p>

Design 2: Full-Screen Background Image

Dramatic full-screen background with overlaybox login form.

CSS for Background Image Design

/<em> Full-Screen Background Login </em>/
<p>.fullscreen-login {
</p>
<p>    min-height: 100vh;
</p>
<p>    background-image: url('/images/login-bg.jpg');
</p>
<p>    background-size: cover;
</p>
<p>    background-position: center;
</p>
<p>    background-attachment: fixed;
</p>
<p>    display: flex;
</p>
<p>    align-items: center;
</p>
<p>    justify-content: center;
</p>
<p>    position: relative;
</p>
<p>}
</p>

<p>.fullscreen-login::before {
</p>
<p>    content: '';
</p>
<p>    position: absolute;
</p>
<p>    top: 0;
</p>
<p>    left: 0;
</p>
<p>    right: 0;
</p>
<p>    bottom: 0;
</p>
<p>    background: rgba(0, 0, 0, 0.5);
</p>
<p>}
</p>

<p>.login-box {
</p>
<p>    position: relative;
</p>
<p>    z-index: 1;
</p>
<p>    background: white;
</p>
<p>    padding: 50px;
</p>
<p>    border-radius: 10px;
</p>
<p>    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
</p>
<p>    max-width: 450px;
</p>
<p>    width: 100%;
</p>
<p>}
</p>

<p>.login-box h2 {
</p>
<p>    color: #333;
</p>
<p>    margin-bottom: 30px;
</p>
<p>    font-size: 32px;
</p>
<p>}
</p>

<p>/<em> Floating Label Effect </em>/
</p>
<p>.form-group {
</p>
<p>    position: relative;
</p>
<p>    margin-bottom: 30px;
</p>
<p>}
</p>

<p>.form-group input {
</p>
<p>    width: 100%;
</p>
<p>    padding: 15px;
</p>
<p>    border: 2px solid #ddd;
</p>
<p>    border-radius: 5px;
</p>
<p>    font-size: 16px;
</p>
<p>    transition: all 0.3s ease;
</p>
<p>}
</p>

<p>.form-group label {
</p>
<p>    position: absolute;
</p>
<p>    left: 15px;
</p>
<p>    top: 15px;
</p>
<p>    color: #999;
</p>
<p>    pointer-events: none;
</p>
<p>    transition: all 0.3s ease;
</p>
<p>}
</p>

<p>.form-group input:focus + label,
</p>
<p>.form-group input:not(:placeholder-shown) + label {
</p>
<p>    top: -10px;
</p>
<p>    left: 10px;
</p>
<p>    font-size: 12px;
</p>
<p>    background: white;
</p>
<p>    padding: 0 5px;
</p>
<p>    color: #667eea;
</p>
<p>}</p>

Design 3: Dark Mode Login

Sleek dark interface for modern applications.

Dark Mode CSS

/<em> Dark Mode Login </em>/
<p>.dark-login {
</p>
<p>    min-height: 100vh;
</p>
<p>    background: #1a1a2e;
</p>
<p>    display: flex;
</p>
<p>    align-items: center;
</p>
<p>    justify-content: center;
</p>
<p>}
</p>

<p>.dark-login-card {
</p>
<p>    background: #16213e;
</p>
<p>    border: 1px solid #0f3460;
</p>
<p>    border-radius: 15px;
</p>
<p>    padding: 40px;
</p>
<p>    max-width: 400px;
</p>
<p>    width: 100%;
</p>
<p>    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
</p>
<p>}
</p>

<p>.dark-login-card h2 {
</p>
<p>    color: #e94560;
</p>
<p>    margin-bottom: 10px;
</p>
<p>}
</p>

<p>.dark-login-card p {
</p>
<p>    color: #94a3b8;
</p>
<p>    margin-bottom: 30px;
</p>
<p>}
</p>

<p>.dark-login-card input {
</p>
<p>    background: #0f3460;
</p>
<p>    border: 1px solid #1a1a2e;
</p>
<p>    color: white;
</p>
<p>    padding: 15px;
</p>
<p>    border-radius: 8px;
</p>
<p>    width: 100%;
</p>
<p>    margin-bottom: 15px;
</p>
<p>}
</p>

<p>.dark-login-card input::placeholder {
</p>
<p>    color: #64748b;
</p>
<p>}
</p>

<p>.dark-login-card input:focus {
</p>
<p>    border-color: #e94560;
</p>
<p>    outline: none;
</p>
<p>}
</p>

<p>.dark-login-card button {
</p>
<p>    background: #e94560;
</p>
<p>    color: white;
</p>
<p>    width: 100%;
</p>
<p>    padding: 15px;
</p>
<p>    border: none;
</p>
<p>    border-radius: 8px;
</p>
<p>    font-weight: 600;
</p>
<p>    cursor: pointer;
</p>
<p>    transition: all 0.3s ease;
</p>
<p>}
</p>

<p>.dark-login-card button:hover {
</p>
<p>    background: #c23250;
</p>
<p>    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
</p>
<p>}</p>

Design 4: Corporate Professional

Clean, professional design for corporate environments.

Corporate CSS

/<em> Corporate Professional Login </em>/
<p>.corporate-login {
</p>
<p>    min-height: 100vh;
</p>
<p>    background: #f5f5f5;
</p>
<p>    display: flex;
</p>
<p>}
</p>

<p>.corporate-split {
</p>
<p>    display: flex;
</p>
<p>    width: 100%;
</p>
<p>    max-width: 1200px;
</p>
<p>    margin: auto;
</p>
<p>    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
</p>
<p>}
</p>

<p>.corporate-brand {
</p>
<p>    flex: 1;
</p>
<p>    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
</p>
<p>    padding: 60px;
</p>
<p>    display: flex;
</p>
<p>    flex-direction: column;
</p>
<p>    justify-content: center;
</p>
<p>    color: white;
</p>
<p>}
</p>

<p>.corporate-brand h1 {
</p>
<p>    font-size: 48px;
</p>
<p>    margin-bottom: 20px;
</p>
<p>}
</p>

<p>.corporate-brand ul {
</p>
<p>    list-style: none;
</p>
<p>    padding: 0;
</p>
<p>}
</p>

<p>.corporate-brand li {
</p>
<p>    padding: 10px 0;
</p>
<p>    font-size: 18px;
</p>
<p>}
</p>

<p>.corporate-brand li:before {
</p>
<p>    content: "✓ ";
</p>
<p>    color: #2ecc71;
</p>
<p>    font-weight: bold;
</p>
<p>}
</p>

<p>.corporate-form {
</p>
<p>    flex: 1;
</p>
<p>    background: white;
</p>
<p>    padding: 60px;
</p>
<p>    display: flex;
</p>
<p>    flex-direction: column;
</p>
<p>    justify-content: center;
</p>
<p>}
</p>

<p>.corporate-form h2 {
</p>
<p>    color: #2c3e50;
</p>
<p>    margin-bottom: 30px;
</p>
<p>}
</p>

<p>.corporate-form input {
</p>
<p>    padding: 15px;
</p>
<p>    border: 1px solid #ddd;
</p>
<p>    border-radius: 5px;
</p>
<p>    margin-bottom: 20px;
</p>
<p>    font-size: 16px;
</p>
<p>}
</p>

<p>.corporate-form button {
</p>
<p>    background: #3498db;
</p>
<p>    color: white;
</p>
<p>    padding: 15px;
</p>
<p>    border: none;
</p>
<p>    border-radius: 5px;
</p>
<p>    font-size: 16px;
</p>
<p>    font-weight: 600;
</p>
<p>    cursor: pointer;
</p>
<p>}
</p>

<p>@media (max-width: 768px) {
</p>
<p>    .corporate-split {
</p>
<p>        flex-direction: column;
</p>
<p>    }
</p>
<p>}</p>

Design 5: Animated Login

Add subtle animations for enhanced user experience.

Animation CSS

/<em> Animated Login </em>/
<p>@keyframes fadeInUp {
</p>
<p>    from {
</p>
<p>        opacity: 0;
</p>
<p>        transform: translateY(30px);
</p>
<p>    }
</p>
<p>    to {
</p>
<p>        opacity: 1;
</p>
<p>        transform: translateY(0);
</p>
<p>    }
</p>
<p>}
</p>

<p>@keyframes pulse {
</p>
<p>    0%, 100% {
</p>
<p>        transform: scale(1);
</p>
<p>    }
</p>
<p>    50% {
</p>
<p>        transform: scale(1.05);
</p>
<p>    }
</p>
<p>}
</p>

<p>.animated-login-card {
</p>
<p>    animation: fadeInUp 0.6s ease-out;
</p>
<p>}
</p>

<p>.animated-login-card input {
</p>
<p>    transition: all 0.3s ease;
</p>
<p>}
</p>

<p>.animated-login-card input:focus {
</p>
<p>    animation: pulse 0.5s ease-in-out;
</p>
<p>}
</p>

<p>.login-button {
</p>
<p>    position: relative;
</p>
<p>    overflow: hidden;
</p>
<p>}
</p>

<p>.login-button::after {
</p>
<p>    content: '';
</p>
<p>    position: absolute;
</p>
<p>    top: 50%;
</p>
<p>    left: 50%;
</p>
<p>    width: 0;
</p>
<p>    height: 0;
</p>
<p>    border-radius: 50%;
</p>
<p>    background: rgba(255, 255, 255, 0.5);
</p>
<p>    transform: translate(-50%, -50%);
</p>
<p>    transition: width 0.6s, height 0.6s;
</p>
<p>}
</p>

<p>.login-button:active::after {
</p>
<p>    width: 300px;
</p>
<p>    height: 300px;
</p>
<p>}</p>

Best Practices for Login Page Design

User Experience

• Keep forms simple (username/email and password)
• Clear, visible labels
• Visible password strength indicator
• Clear error messages
• Remember me checkbox
• Forgot password link prominent

Accessibility

• Sufficient color contrast (WCAG 2.1 AA minimum)
• Keyboard navigation support
• Screen reader compatible labels
• Focus indicators visible
• Minimum touch target size (44x44px)

Performance

• Optimize background images (compress, use WebP)
• Minimize CSS file size
• Use CSS animations over JavaScript when possible
• Load fonts efficiently

Security Indicators

• Display HTTPS/SSL indicators
• Show 2FA status
• Privacy policy link
• Security certification badges

Applying Custom CSS

Method 1: Plugin Settings

Navigate to Settings > Attributes Access > Login Pages > Custom CSS:

/<em> Add your custom CSS here </em>/
<p>[Paste your CSS code]</p>

Method 2: Theme Customizer

Go to Appearance > Customize > Additional CSS and add your styles.

Method 3: Child Theme

Create login-custom.css in your child theme and enqueue it:

function custom_login_styles() {
<p>    wp_enqueue_style(
</p>
<p>        'custom-login',
</p>
<p>        get_stylesheet_directory_uri() . '/login-custom.css'
</p>
<p>    );
</p>
<p>}
</p>
<p>add_action('login_enqueue_scripts', 'custom_login_styles');</p>

Testing Checklist