This post contains a total of 5+ Hand-Picked CSS Instagram Login Page Examples with Source Code. All these Instagram Login Pages are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Instagram Login Page Examples
1. By Mhamed Kchikech
Made by Mhamed Kchikech. Simple Instagram login page with Instagram Logo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
*{
font-family: Montserrat;
}
body,html{
height:100%;
width:100%;
margin:0;
padding:0;
}
body{
display:flex;
background-color: #fafafa;
}
.login{
width:350px;
height: auto;
padding-bottom: 40px;
margin: auto;
border: 1px solid #e6e6e6;
background-color: white;
}
.logo{
width: 100%;
display: flex;
height: 150px;
}
.logo img{
width: 150px;
margin-left: auto;
margin-right: auto;
}
.form{
width: 100%;
display: flex;
}
.form form{
margin-right: auto;
margin-left: auto;
width: 100%;
}
.inputGroup{
width: 100%;
display: flex;
position: relative;
margin-top: 5px;
}
.form form input{
width: 75%;
margin-left: auto;
margin-right: auto;
outline: none;
background-color: white;
border: 1px solid #efefef;
outline: none;
height: 36px;
border-radius: 2px;
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
font-family: Montserrat;
}
label{
position: absolute;
left: 12%;
top: 12px;
color: #999;
font-size: 12px;
cursor: text;
transition-duration: .2s;
}
.form form input:focus ~ label {
top: 3px;
font-size: 10px;
transition-duration: .2s;
}
.form form input:valid ~ label{
top: 3px;
font-size: 10px;
transition-duration: .2s;
}
#login{
margin-right: auto;
margin-left: auto;
background-color: #3897f0;
border-style: none;
width: 79%;
height: 30px;
color: white;
font-size: 15px;
cursor: pointer;
border-radius: 2px;
margin-top: 5px;
font-weight: bold;
}
@media (max-width: 767px){
.login{
margin:2.5% auto 2.5% auto;
width: 95%;
height: auto;
background-color: transparent;
border-color: transparent;
}
.form form input{
width: 100%;
}
.inputGroup label{
left: 1%;
}
#login{
width: 100%;
}
}
</style>
</head>
<body>
<body class="flex">
<div class="login">
<div class="logo"><img src="https://cdn130.picsart.com/259430940027212.png?r1024x1024"></div>
<div class="form">
<form>
<div class="inputGroup">
<input id="input" type="text" name="user" autocomplete="off" required="">
<label for="input">Phone number, username, or email</label>
</div>
<div class="inputGroup">
<input id="input" type="password" name="pass" autocomplete="off" required="">
<label for="input">Password</label>
</div>
<div class="inputGroup">
<button id="login">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>2. By Doğukan Akgün
Made by Doğukan Akgün. CSS Instagram Login Clone. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#fafafa;
margin:0;
padding:0;
}
*{
font-family: "proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.instagram{
background:#ffffff;
border: 1px solid #e6e6e6;
width:350px;
border-radius:3px;
margin-bottom:10px;
text-align:center;
padding:5px;
}
.all{
width:350px;
position:relative;
left:50%;
margin-left:-175px;
margin-top:25px;
}
.inputlar{
width:270px;
margin:auto;
}
.inputlar input{
width: 250px;
padding:10px;
border: 1px solid #dbdbdb;
border-radius: 3px;
margin-top:7px;
outline:0;
color:#262626;
}
.inputlar input:focus{
border:1px solid #aaa;
}
.buttons{
width:270px;
margin:auto;
}
.buttons button{
width: 100%;
outline:0;
font-size:14px;
margin-top:15px;
margin-bottom:25px;
padding:10px;
font-weight:bold;
color:#fff;
background:#3897f0;
border:none;
border-radius:3px;
}
.logo {
margin:auto;
width:270px;
text-align:center;
}
.logo img{
width:60%;
margin-top:20px;
}
.oryantal{
width:270px;
margin:auto;
border-bottom:1px solid #c7c7c7;
margin-bottom:15px;
}
.kayit{
width:270px;
margin:auto;
text-align:center;
color:#262626;
font-size:13px;
margin-bottom:15px;
}
a{
text-decoration:none;
color:#333;
}
.pad{
padding:20px 5px;
}
</style>
</head>
<body>
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<div class="all">
<div class="instagram">
<div class="logo">
<img src="https://www.sirendesign.com.au/wp-content/themes/siren/library/images/instagram-logo.png" alt="" />
</div>
<div class="inputlar">
<input type="text" placeholder="PLace holder" />
<input type="password" placeholder="placeholder" />
</div>
<div class="buttons">
<button>Login</button>
</div>
<div class="oryantal"></div>
<div class="kayit">
Text<a href="#">Here</a>
</div>
</div>
<div class="instagram pad">
<a href="#">Text Here</a>
</div>
</div>
</body>
</html>3. By John James
Made by John James. Instagram login page with Gradient Background. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700');
body {
font-family: 'Fira Sans', sans-serif;
color: #fff;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background-repeat: no-repeat;
background-size: cover;
}
.logo-container {
margin: 15% 0 3%;
text-align: center;
}
.logo-container img {
width: 250px;
}
.login-form-container {
width: 30%;
margin: 0 auto 14%;
}
.login-form-container form {
margin: 0 auto;
}
.login-form-container form input {
width: calc(100% - 30px);
margin: 0 auto 20px;
padding: 10px 15px;
height: 25px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid transparent;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
letter-spacing: .3px;
transition: all .3s ease;
}
.login-form-container form input:focus {
border: 1px solid rgba(255, 255, 255, 0.35);
outline: none;
}
::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.45);
}
::-moz-placeholder {
color: rgba(255, 255, 255, 0.45);
}
.login-form-container form button {
display: block;
width: 100%;
margin-bottom: 15%;
padding: 15px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.45);
border-radius: 4px;
font-size: 14px;
font-weight: 400;
letter-spacing: .3px;
transition: all .3s ease;
}
.login-form-container form button:hover {
background: #000;
color: #fff;
cursor: pointer;
}
.login-form-container form p {
text-align: center;
}
.login-form-container form p a {
display: block;
margin: 15px 0 20px;
color: #fff;
font-size: 13px;
letter-spacing: .3px;
text-decoration: none;
}
.app-download-links {
text-align: center;
}
.app-download-links p {
margin-bottom: 25px;
}
.app-download-links a img {
height: 45px;
margin: 0 7px 20px;
}
</style>
</head>
<body>
<div class="logo-container">
<img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533395974/instagram-font-logo-white-png.png" alt="logo" />
</div>
<div class="login-form-container">
<form action="#" method="post">
<input type="text" placeholder="Username" required="yes" />
<input type="password" placeholder="Password" required="yes" />
<button type="submit">Log In</button>
<p><a href="#">Forgot Password</a><a href="#">Sign Up</a></p>
</form>
</div>
<div class="app-download-links">
<p>Get the app.</p>
<a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-appstore.png" alt="Download on App Store" /></a>
<a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-googleplay.png" alt="Download on Google Play" /></a>
<a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-microsoft.png" alt="Get from Microsoft" /></a>
</div>
</body>
</html>4. By Apratim Shukla
Made by Apratim Shukla. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
html { height: 100% }
body {
background: rgba(250,250,250,1);
}
.login {
background: #fff;
border: 1px solid rgb(236, 234, 234);
border-radius: 0px;
height: 410px;
margin: 30px auto 0;
width: 400px;
}
.login h1 {
box-sizing: border-box;
margin: 20px 0 30px 0;
text-align: center;
user-select: none;
}
input[type="password"], input[type="text"] {
background: rgba(250,250,250,1);
border: 1px solid rgb(236, 234, 234);
border-radius: 3px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: black;
height: 39px;
margin: 10px 0 0 40px;
padding: 10px;
font-size: 13px;
width: 320px;
}
input[type="password"]::placeholder, input[type="text"]::placeholder {
color: rgb(165, 164, 164);
}
input[type="password"]:focus, input[type="text"]:focus {
outline: 0;
border: 1px solid #a1a1a1;
}
.forgot {
color: #7f7f7f;
display: inline-block;
box-sizing: border-box;
font: 12px/1 sans-serif;
left: -19px;
position: relative;
text-decoration: none;
top: -15px;
transition: color .4s;
}
.forgot:hover { color: #3b3b3b }
input[type="submit"] {
background: #3897F0;
border: 0px;
border-radius: 4px;
box-sizing: border-box;
color: #f8f8f8;
font-weight: 600;
height: 29px;
margin: 14px 0 0 40px;
width: 320px;
}
input[type="submit"]:hover, input[type="submit"]:focus {
background: rgb(48, 144, 233);
outline: 0;
}
.divider {
overflow: hidden;
text-align: center;
box-sizing: border-box;
color:rgb(165, 164, 164);
font-size: 13.5px;
font-weight: 500;
margin: 20px 0 0 40px;
width: 320px;
}
.divider:before,
.divider:after {
background-color: rgb(224, 221, 221);
content: "";
display: inline-block;
height: 1.2px;
position: relative;
vertical-align: middle;
width: 50%;
}
.divider:before {
right: 2em;
margin-left: -50%;
}
.divider:after {
left: 2em;
margin-right: -50%;
}
.fbwrapper {
text-align: center;
margin-top: 25px;
}
.fb a{
font-weight: 600;
font-size: 14px;
display: inline;
vertical-align: middle;
margin: 20px 0 0 10px;
text-decoration: none;
color: rgb(107, 106, 106);
}
.fb img {
vertical-align: middle;
}
.forgotwrapper{
text-align: center;
margin-top: 35px;
}
.forgot a{
margin: 20px 0 0 40px;
text-decoration: none;
color: rgb(107, 106, 106);
}
.infobox {
background: #fff;
border: 1px solid rgb(236, 234, 234);
border-radius: 0px;
height: 60px;
margin: 10px auto 0;
width: 400px;
}
.infobox p {
box-sizing: border-box;
margin: 22px 0 30px 0;
text-align: center;
user-select: none;
font-size: 14px;
}
.infobox p a{
color: rgb(94, 163, 243);
text-decoration: none;
font-weight: 600;
}
.apps {
height: 100px;
margin: 20px auto 0;
width: 400px;
}
.apps p {
box-sizing: border-box;
margin: 10px 0 30px 0;
text-align: center;
user-select: none;
font-size: 14px;
}
.apps span a{
box-sizing: border-box;
margin-left: 28px;
}
.app span a img{
padding-left: 20px;
}
.footer {
position: relative;
left: 0;
bottom: 0;
margin-top: 50px;
width: 100%;
text-align: center;
}
.footer p a {
color: #003569;
text-decoration: none;
padding-left: 10px;
font-size: 13px;
}
.footer p span {
color: rgb(189, 186, 186);
padding-left: 80px;
font-size: 13px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body>
<div class="login">
<h1><img src="https://i.imgur.com/wvLiKam.png" width="200px" height="68px"></h1>
<form action="" method="POST">
<input placeholder="Phone number, username, or email" type="text" name="username" >
<input placeholder="Password" type="password" name="password">
<input type="submit" value="Log In" /><br>
</form>
<div class="divider"><b>OR</b></div>
<div class="fbwrapper"><div class="fb"><a href="#"><img src="https://i.imgur.com/exksovo.png"> Log in with Facebook</a></div></div>
<div class="forgotwrapper"><div class="forgot"><a href="#">Forgot password?</a></div></div>
</div>
<div class="infobox">
<p>Don't have an account? <a href="#">Sign up</a></p>
</div>
<div class="apps">
<p>Get the app.</p>
<span><a href="#"><img src="https://i.imgur.com/lREV6Qa.png" height="45px" width="153px"></a><a href="#"><img src="https://i.imgur.com/DFQNKXK.png" height="45" width="151px"></a></span>
</div>
</body>
</html>5. By Robert
Made by Robert. Responsive CSS Instagram Login Page with Image on Left side. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Noto+Sans&display=swap");
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
font-family: Noto Sans;
}
body {
background: white;
}
.content-ctr {
width: 350px;
height: 90%;
min-height: 650px;
margin: auto;
}
.right-content {
width: 100%;
}
.login-ctr {
padding: 0 50px 20px;
box-sizing: border-box;
text-align: center;
}
.login-ctr img {
width: 100%;
}
.login-ctr input {
display: block;
width: 100%;
box-sizing: border-box;
margin: 5px 0;
padding: 10px;
font-size: 11px;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
border-radius: 2px;
}
.login-ctr input[type="submit"] {
padding: 5px;
font-size: 13px;
font-weight: 600;
color: white;
background: #a3e2dc;
border: none;
margin: 15px 0 25px;
}
hr {
border: none;
border-bottom: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
}
.login-ctr p {
margin: -10px;
}
.login-ctr p span {
background: white;
padding: 0 15px;
color: grey;
font-size: 14px;
font-weight: 600;
}
.login-ctr a {
display: block;
margin-top: 35px;
color: #385185;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.login-ctr a:nth-of-type(2) {
margin-top: 20px;
font-size: 12px;
font-weight: 400;
}
.sign-up-ctr {
text-align: center;
padding: 50px;
font-size: 13px;
}
.sign-up-ctr a {
text-decoration: none;
color: #22bed6;
font-weight: 600;
}
.button-ctr {
margin-top: 25px;
text-align: center;
}
.button-ctr img {
width: 35%;
margin-top: 20px;
}
footer {
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 13px;
margin: 5px auto 15px;
min-width: 350px;
}
footer a {
display: block;
margin: 0 8px;
text-decoration: none;
color: #777;
line-height: 30px;
}
.translate {
display: flex;
justify-content: center;
color: #777;
font-size: 13px;
min-width: 350px;
}
select {
border: none;
color: #777;
margin-bottom: 40px;
margin-right: 15px;
}
.flex > img {
display: none;
}
/* Small devices (portrait tablets and large phones, 450px and up) */
@media only screen and (min-width: 450px) {
body {
background: rgba(var(--b3f, 250, 250, 250), 1);
}
.content-ctr {
margin-top: 40px;
}
.login-ctr {
background: white;
border: 1px solid lightgrey;
}
.login-ctr input {
background: rgba(var(--b3f, 250, 250, 250), 1);
}
.sign-up-ctr {
background: white;
border: 1px solid lightgrey;
padding: 20px 0;
margin: 10px 0;
}
select {
background: rgba(var(--b3f, 250, 250, 250), 1);
}
footer {
margin-top: -25px;
}
}
/* Large devices (laptops/desktops, 900px and up) */
@media only screen and (min-width: 900px) {
.content-ctr {
width: 700px;
}
.flex {
width: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
}
.right-content {
width: 50%;
}
.flex > img {
width: 40%;
display: block;
}
footer {
margin-top: -40px;
}
.translate {
padding-bottom: 40px;
}
}
</style>
</head>
<body>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="content-ctr">
<div class="flex">
<div class="right-content">
<div class="login-ctr">
<img src="https://assets.codepen.io/6060109/ig-logo.png">
<form>
<input type="text" placeholder="Phone number, username, or email">
<input type="password" placeholder="Password">
<input type="submit" value="Log In">
</form>
<hr>
<p><span>OR</span></p>
<a href="#"> <i class='fa fa-facebook-official' style='color: #385185; font-size: 18px;'></i> Log in with Facebook</a>
<a href="#">Forgot password?</a>
</div>
<div class="sign-up-ctr">
<p>Don't have an account? <a href="#">Sign up</a></p>
</div>
<div class="button-ctr">
<p>Get the app.</p>
<div class="btn-flex">
<img src="https://assets.codepen.io/6060109/IG-app-store-button.png">
<img src="https://assets.codepen.io/6060109/IG-Google-Play-Button.png">
</div>
</div>
</div>
<img src="https://assets.codepen.io/6060109/IG-phone.jpeg">
</div>
</div>
<footer>
<a href="#">Meta</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Help</a>
<a href="#">API</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Top Accounts</a>
<a href="#">Hashtags</a>
<a href="#">Locations</a>
<a href="#">Instagram Lite</a>
<a href="#">Beauty</a>
<a href="#">Dance</a>
<a href="#">Fitness</a>
<a href="#">Food & Drink</a>
<a href="#">Home & Garden</a>
<a href="#">Music</a>
<a href="#">Visual Arts</a>
</footer>
<div class="translate">
<select>
<option>English</option>
<option>Spanish</option>
<option>German</option>
</select>
<p>© 2022 Instagram from Meta</p>
</div>
</body>
</html>6. By Saigotham
Made by Saigotham. Basic Instagram login page clone. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
body {
font-family: sans-serif;
background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 3rem;
font-size: 14px;
}
.box {
max-width: 350px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #ffff;
border: 1px solid #e6e6e6;
border-radius: 1px;
margin: 0 0 10px;
padding: 10px 0;
flex-grow: 1;
}
.heading {
margin: 22px auto 12px;
background-image: url("https://www.instagram.com/static/bundles/es6/sprite_core_b20f2a3cd7e4.png/b20f2a3cd7e4.png");
background-position: -98px 0;
height: 51px;
width: 177px;
overflow: hidden;
}
.field {
margin: 10px 0;
position: relative;
font-size: 14px;
width: 100%;
text-overflow: ellipsis;
}
input {
padding: 9px 0px 7px 9px;
font-size: 12px;
width: 16rem;
height: 1.2rem;
outline: none;
background: #fafafa;
border-radius: 3px;
border: 1px solid #efefef;
}
/* label intial position*/
label {
position: absolute;
pointer-events: none;
left: 10px;
padding-bottom: 15px;
transform: translateY(10px);
line-height: 6px;
transition: all ease-out 0.1s;
font-size: 14px;
color: #999;
padding-top: 6px;
}
/* hiding placeholder in all browsers */
input::placeholder {
visibility: hidden;
}
/* hiding placeholder in mozilla */
.login-form ::-moz-placeholder {
color: transparent;
}
/* label final position */
input:not(:placeholder-shown) + label {
transform: translateY(0);
font-size: 11px;
}
/* input padding increases if placeholder is not shown */
input:not(:placeholder-shown) {
padding-top: 14px;
padding-bottom: 2px;
}
.login-button {
text-align: center;
width: 100%;
padding: 0.5rem;
border: 1px solid transparent;
background-color: #3897f0;
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.separator {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
margin-top: 6px;
}
.separator .line {
height: 1px;
width: 40%;
background-color: #dbdbdb;
}
.other {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.fb-login-btn {
margin: 1rem;
border: 0;
cursor: pointer;
font-size: 14px;
color: #385185;
font-weight: 600;
background: transparent;
}
.fb-icon {
color: #385185;
font-size: 1rem;
padding-right: 1px;
}
.forgot-password {
font-size: 11px;
color: #003569;
}
.signup {
color: #3897f0;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="heading"></div>
<form class="login-form">
<div class="field">
<input
id="username"
type="name"
placeholder="Phone number, username, or email"
/>
<label for="username">Phone number, username, or email</label>
</div>
<div class="field">
<input id="password" type="password" placeholder="password" />
<label for="password">Password</label>
</div>
<button class="login-button" title="login">Log In</button>
<div class="separator">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
<div class="other">
<button class="fb-login-btn" type="button">
<i class="fa fa-facebook-official fb-icon"></i>
<span class="">Log in with Facebook</span>
</button>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
</form>
</div>
<div class="box">
<p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
</div>
</div>
</body>
</html>