Password Page customization examples (Custom HTML and CSS)
Created by
Last updated 8 April 2022, 10:27
Watch for changes
✓ Subscribed
You can customize password page with own HTML / JS / CSS.

Here are some examples:
Image background with glass-like efect

body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1601649705707-13b54dc57b87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1313&q=80);
width: 100%;
height: 100%;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
section.info {
position: relative;
background: inherit;
border-radius: 2px;
overflow: hidden;
}
section.info:after {
content: '';
width: 400px;
height: 300px;
background: inherit;
position: absolute;
left: -25px;
right: 0;
top: -25px;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
section.info main {
position: relative;
z-index: 1;
}
section.info main header {
color: #fdfbfb;
}
.field-label {
color: #fdfbfb;
}
.buttons input[type="submit"] {
border: 2px solid white;
background: none;
color: black;
cursor: pointer;
}
input:focus {
background-color: rgba(255, 255, 255, 0.1) !important;
}
footer {
background: #07358a;
padding: 10px 120px;
}
Company logo and name. Gradient background

<!-- HTML on beginning -->
<header style="display: flex; align-items: center; font-size: 2em">
<img style="width: 128px; height: 128px" src="https://confluence.external-share.com/content/6ff650c8-61d3-4b35-872d-190e97a94ddc/media/VkFIa3A3VEpZUm50TVpiMy1sSi1VQ3UwRE9fOXJzWktkdnJ6MnE2LWZ4MD0uNmZmNjUwYzgtNjFkMy00YjM1LTg3MmQtMTkwZTk3YTk0ZGRjLmF0dGFjaG1lbnRzLjY1NTM3NzM=/company_logo.png"> My Company Name
</header>
// CSS
body {
background-image: linear-gradient(160deg, rgb(0, 147, 233) 0%, rgb(128, 208, 199) 100%);
justify-content: center;
}
section.info {
margin: 0px;
margin-top: 20px;
}
footer {
flex-grow: 1;
display: flex;
align-items: end;
}