fingerprint scanner
fingerprint scanner

Hy Friends, In this tutorial we will create a dummy fingerprint scanner using CSS. Here we will add a basic fingerprint scanner animation effect without any hovering effect.

Our fingerprint scanner will have a basic animation, a bar will move top to down like any other scanner, behind the bar there is a single image but we added :after pseudo-element so we applied a filter for blue color. At the bottom, we added a scanning text with the show and hide animation.

Let’s design our scanner!

Table of Contents

Fingerprint Scanner Using CSS

Here we need to create two files called index.html and style.css. we will start with the index.html code.

index.html

first, we will add the CSS file link in the head section.

<link rel="stylesheet" href="style.css">


now create a div with the class name ‘scan’ in the body element.

<div class="scan">

</div>


create another div inside the first div with the class name “fingerprint”, we will use it as a scanner bar. and under that create an h3 element and write text “Scanning…”.

<div class="scan">
    <div class="fingerprint"></div>
    <h3>Scanning...</h3>
</div>


Here is our index.html code is done. Let’s create the style.css code.

style.css

As we always do first, we will create our variables, here we will create three variables:

–bgColor : for the background-color
–scannerColor: for the scanning bar and h3 element text color
–imageColor: we are using this to change the image color with a hue-rotate filter.

:root{
  --bgColor: #111;
  --scannerColor: #3fefef;
  --imageColor: 130deg;
}


set universal properties like margin, padding, and font-family:

* {
    margin:0;
    padding:0;
    font-family:consolas;
}


set the properties for the body element, for body element we set the display flex property, content is aligned center using justify-content and align-items property, minimum-height is set to 100vh and the background color from the variable.

body {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background: var(--bgColor);
}


set the properties for the scan class.

.scan {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}


Let’s set the fingerprint image in the “fingerprint” class.

.scan .fingerprint {
    position:relative;
    width:300px;
    height:230px;
    background:url(https://www.pngall.com/wp-content/uploads/2016/06/Fingerprint-Free-Download-PNG.png);
    background-repeat: no-repeat;
    background-size:300px;
}


here we added a png image from the URL, set the width as 300 and height as 230px, the background-repeat property is set to no-repeat and the background-size is set to 300px.

.scan .fingerprint::before {
    content: '';
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:230px;
    background:url(https://www.pngall.com/wp-content/uploads/2016/06/Fingerprint-Free-Download-PNG.png);
    filter: invert(100%) sepia(60%) saturate(3000%) hue-rotate(var(--imageColor)) brightness(95%) contrast(80%);
    background-size:300px;
    animation:animate 4s ease-in-out infinite;    
}


here we added the same property as above, but in this we added a filter when the bar hovers on the image it should change the color, so using filter we give it to the color as sky-blue.

for the image, we added a simple animation below.

@keyframes animate {
    0%, 100% {
        height:0%;
    }
    
    50% {
        height:100%;
    }
}

for the bar, we used the .fingerprint::after psuedo element.

.scan .fingerprint::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:8px;
    background: var(--scannerColor);
    border-radius:8px;
    filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
    animation: moveLine 4s ease-in-out infinite;
}


to move the bar we are using moveLine animation. moveLine as the animation name.

@keyframes moveLine {
    0%, 100% {
        top:0%;
    }
    
    50% {
        top:100%;
    }
}

in the end, we are adding style to the h3 element texts.

.scan h3 {
    text-transform:uppercase;
    font-size:2em;
    letter-spacing:2px;
    margin-top:20px;
    color: var(--scannerColor);   
    filter:drop-shadow(0 0 20px var(--scannerColor)) drop-shadow(0 0 60px var(--scannerColor));
    animation:animate_text 0.5s steps(1) infinite;
}

@keyframes animate_text {
    0%, 100% {
        opacity:0;
    }
    
    50% {
        opacity:1;
    }
}


Hope this tutorial was interesting.
Thank You!

Can I scan my fingerprint online?

No, You can’t. And you shouldn’t try to do it.

Is this a real fingerprint scanner?

No, It is a UI for the fingerprint scanners.

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply