DEV Community

Adeyele Paul
Adeyele Paul

Posted on

How to Create the Perfect Transparent Login Form

How you design forms with CSS makes a big difference. They can either catch someone's attention in a good way or turn them away

One form style sure to catch eyes is a transparent login. These see-through forms just look sleek and modern. They command focus in a very nice way.

So recently I tried creating this type of attractive form myself using HTML, CSS and some JavaScript. And guess what? I succeeded!

After some work, I ended up with a simple transparent login blending into the background smoothly. No harsh lines or opaque boxes that look bad. Just a clean, integrated experience.

Now I'll walk through every step for coding your own transparent login form. We'll cover the setup, styles, user-friendly touches, everything. It's straightforward when you know how.

After this guide, you will be able to code your own stylish, see-through login form with ease. The steps are simple enough for anyone to understand.

Let's get started!

Step 1: Building the HTML Structure

Let's start by making the key HTML pieces for the login form. First, make a div container for the full-screen background image. Give it the class "fullscreen-container".

<div class="fullscreen-container">
  <!- Our login container will go here ->
</div>
Enter fullscreen mode Exit fullscreen mode

Inside that, create another div with the class "login-container". This will hold the form itself and a heading. Now, in the "login-container", add an h3 element with class "login-title". Put the text "Welcome back" to greet users.

<div class="login-container">
  <h3 class="login-title">Welcome back</h3>
  <!-- our Form structure -->
</div>
Enter fullscreen mode Exit fullscreen mode

Below the header, but inside the login-container, make a form element with your input fields and submit button. For each input (email and password), wrap a label and input in a div called "input-group" just like this:

<form>
  <div class="input-group">
    <label>Email</label>
    <input type="email">
  </div>
  <div class="input-group">
    <label>Password</label>
    <input type="password">
  </div>
  <button type="submit" class="login-button">Sign in</button>
</form>
Enter fullscreen mode Exit fullscreen mode

For the email we used <input type="email">. We also did the same for password but instead of email it's type="password". Finally, a <button> with type="submit", class="login-button", and text "Sign in."

When you finish and load the page, you'll see a basic working login form! Plain for now, but styling will make it look awesome.

Step 2: Style the Background Image

With the HTML structure ready, let's focus on visuals - starting with the full-screen background image. First, the body element has margins by default, preventing images from stretching edge-to-edge. Remove those margins:

body {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Next, target the .fullscreen-container class and specify your background image URL:

.fullscreen-container {
  background-image: url('https://www.dropbox.com/scl/fi/h8rpjs220906yos05en5g/mountain-wolves.jpeg?rlkey=omnh97cntwh21low438a4uwn3&raw=1');
}
Enter fullscreen mode Exit fullscreen mode

Note: You can get free beautiful background image on site like unsplash and pexels

After setting your background image, make it fill the whole viewport by setting minimum height and width to 100vh and 100vw respectively:

.fullscreen-container {
  min-height: 100vh;
  width: 100vw;
}
Enter fullscreen mode Exit fullscreen mode

Now give it background-size and background-position property and set it to cover and center respectively, so that we can have a perfectly scaled, centered look:

.fullscreen-container {
  background-size: cover;
  background-position: center;
}
Enter fullscreen mode Exit fullscreen mode

Lastly, let's use flexbox to vertically and horizontally center the .login-container inside the .fullscreen-container:

.fullscreen-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

By this time, our background should now fill the entire viewport beautifully, creating a proper setting for the see-through login form.

Step 3: Styling the Login Box

Now that the background looks good, we need to make the main login div itself look really nice too. This nested container holds the login form, so we want it to look pretty and see-through.

First, pick a background color that goes well with your background image.

Then use hsla to set your preferred color, because this will actually lets us easily manipulate and adjust how see-through the background color of our login-container:

.login-container {
  background-color: hsla(201, 100%, 50%, 0.6);
}
Enter fullscreen mode Exit fullscreen mode

Incase you don't know what Hsla stands for, it stands for hue, saturation, lightness, alpha.

The hue is a color circle from 0-360 degrees (201 is bluey-green). Saturation is how intense the color is from 0-100% (100% here is very intense). Lightness is how light/dark the color should be from 0-100% (50% is right in the middle). Alpha is how see-through the color is from a range of 0-1 (0.6 here makes it pretty see-through).

Feel free to play with it, try out different color that could probably blend with your background image. You can also learn more about hsla here: https://www.w3schools.com/cssref/func_hsla.php

Next, put some space around the inside of the box:

.login-container {
  padding: 50px 30px;
}
Enter fullscreen mode Exit fullscreen mode

Now, to make our login-container responsive on any screen, set a percentage width but limit the maximum, just like this:

.login-container {
  width: 50%; /* The div will be 50% of the screen width */
  max-width: 600px; /* But it can't get bigger than 600 pixels wide */
}
Enter fullscreen mode Exit fullscreen mode

So as the browser window gets smaller, the login box will shrink until it hits 600px wide. Then it won't shrink anymore.

These few styles we just applied made the login form look really slick - it has a nice see-through colored background that goes with the image behind it. Plus it's the perfect size on any screen. Next we should style the stuff inside the box!

Step 4: Making the Title Look Okay

Now let's work on the big "Welcome" text at the top that greets people. We want to make some small changes so it really pops out and looks good with the rest of the design.

First, let's make the text white so it shows up nicely against the see-through colored box:

.login-title {
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

To make the text centered, we can align it using text-align:

.login-title {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

By default, the big "Welcome" heading has some space above and below it. Let's remove the space above but keep 40 pixels of space below:

.login-title {
  margin: 0 0 40px;
}
Enter fullscreen mode Exit fullscreen mode

Lastly, make the letters bigger. But we don't want them too thick or dark, so use a regular font weight instead of bold.

.login-title {
  font-size: 2.5em; /* 2.5 times bigger than normal text */
  font-weight: normal; /* Not bold, just regular weight */
}
Enter fullscreen mode Exit fullscreen mode

With just those few styles, the welcome title should now looks really nice!

Step 5: Making the Email and Password Sections Look Nice

Right now, the boxes for typing the email and password are side-by-side. But we want them stacked going up and down instead of across.

Let's use flexbox to fix this:

.input-group {
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

This simple code makes the email box go above the password box. Not next to each other anymore.

Next, add a tiny bit of space between those two boxes:

.input-group {
  margin-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode

This puts a small 20 pixel gap under each box. So there's a little room between the email part and password part.

Adding that tiny gap makes it way clearer where one section stops and the next starts. Awesome!

Step 6: Making the Email and Password Labels Look Cool

The Email and password labels need to look pretty cool too. We want them to match the see-through colored box style.

First, make the label text white so it shows up nicely:

.input-group label {
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

Next, make the label text thinner and a bit bigger than normal:

.input-group label {
  font-weight: lighter;
  font-size: 1.2em;
}
Enter fullscreen mode Exit fullscreen mode

Lastly, add a tiny 7 pixel gap between the labels and the text boxes below them:

.input-group label {  
  margin-bottom: 7px;
}
Enter fullscreen mode Exit fullscreen mode

Just those few little changes make the labels look good enough! The white, slightly bigger, thinner text looks super modern. And that tiny gap gives a nice breathe between the labels and boxes.

With the labels looking this slick, the whole form is really coming together nicely. Just the actual text input boxes to style up next!

Step 7: Making the Text Boxes Look Awesome

Right now the boxes for typing your email and password just look boring and plain. Let's spice them up to match the cool see-through vibe!

First, get rid of all the default browser styles on those boxes:

.input-group input {
  background: none;
  border: none; 
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

This clears everything so we can rebuild the styles exactly how we want.

Next, give the boxes a slightly see-through bluish background color:

.input-group input {
  background-color: hsla(201, 30%, 95%, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

The "hsla" part makes a bluey color that's sort of see-through.

Then make the text inside bigger and give it some nice breathing space:

.input-group input {
 font-size: 1.5em;
 padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

For the border, we'll use a subtle dark blue color with slightly rounded corners:

.input-group input { 
  border: 1px solid hsl(201, 6%, 20%);
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Almost done! Let's make the text white and a bit thinner:

.input-group input {
  color: white; 
  font-weight: lighter;
}
Enter fullscreen mode Exit fullscreen mode

Lastly, a cool trick - when you click in the box, the border gets a brighter blue:

.input-group input:focus {
  border-color: hsl(201, 50%, 50%);
}
Enter fullscreen mode Exit fullscreen mode

Boom! Those input boxes look absolutely better now than when we started. The colors, spacing, everything fits the translucent theme perfectly.

Step 8: Making the Login Button Look good

The login button is the most important part - it's what people click to actually sign in. So we have to make this button look good enough.

First up, clear out all the default browser button styles:

.login-button {
  background: none;
  border: none;
  outline: none;  
}
Enter fullscreen mode Exit fullscreen mode

Next, we'll give it a slightly see-through bluish background color:

.login-button {
  background-color: hsla(201, 100%, 50%, 0.1);
}
Enter fullscreen mode Exit fullscreen mode

That "hsla" color code makes a nice calm blue that's just a bit see-through.

Then make the button nice and big, with slightly rounded corners:

.login-button {
  padding: 10px 30px;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

To match the text boxes, give it that same subtle dark blue border:

.login-button {
  border: 1px solid hsl(201, 6%, 20%);
}
Enter fullscreen mode Exit fullscreen mode

For the text itself, make it bigger, white, and slightly thinner:

.login-button {
  color: white;
  font-size: 1.5em;
  font-weight: lighter;
}
Enter fullscreen mode Exit fullscreen mode

We'll put a little 20px gap between the button and text boxes too:

.login-button {
  margin-top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Last part - when you hover over the button, it gets a brighter blue background!

.login-button {
  cursor: pointer;
}

.login-button:hover, 
.login-button:focus {
background-color: hsla(201, 50%, 50%, 0.3); /* Brighter blue bg */
border-color: hsl(201, 50%, 50%); /* Brighter blue border */
}
Enter fullscreen mode Exit fullscreen mode

If you've been following along, here should be the final outcome of our transparent login form:

That's all

We made a really simple pretty see-through login form with HTML and CSS! By styling it step by step, we were able to make our basic html into something that looks awesome.

So if you haven't been following along, open your code editor and try out what you learned here! Once you get it, go crazy with designs and make it your own.

Awesome design doesn't have to be complicated. If you work hard on the basics, you can make websites that look great and are fun to use.

Top comments (12)

Collapse
 
connor-ve profile image
Connor Van Etten

Great article!

Something to add, when you make a transparent background you might want to blur the images behind the box, as they can make it harder to read. Try adding this to your login-container class in your CSS.

  border-radius: 8px;
  box-shadow: 1px 1px 5px 1px #c8c8c854;
  background-color: #c8c8c87c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid #e9e9e94f;
Enter fullscreen mode Exit fullscreen mode

Adding backdrop-filter and -webkit-backdrop-filter along with a boxshadow that contains blur will add some level of "glass" like effect to your div.

Cheers!

Collapse
 
adesoji1 profile image
Adesoji1

True, he could add πŸ‘€ to view the password too then later asterisk it

Collapse
 
peboy profile image
Adeyele Paul • Edited

This!!! πŸ“ŒπŸ“ŒπŸ“Œ

Collapse
 
caiocv18 profile image
Caio Vinicius

Amazing article!

Collapse
 
fadekocodeit profile image
Future_Developer

Thank you for sharing bro!

Collapse
 
peboy profile image
Adeyele Paul

You're welcome! Glad it was helpful.

Collapse
 
maheshmrs profile image
Mahesh Shinde

Thank you bro!
Nice article, does GitHub link available?

Collapse
 
diegoluisito profile image
Ericson Ramos

Can you give me a sample design of real estate company landing page? Tia

Collapse
 
adesoji1 profile image
Adesoji1

Rooting up πŸ’ͺ🏽 for you

Collapse
 
peboy profile image
Adeyele Paul

Thank you, Adesoji πŸ’œ

Collapse
 
ramonortegajr profile image
R A M

Nice work bro! Keep it up

Collapse
 
peboy profile image
Adeyele Paul

Thank you πŸ’ͺ