hello and welcome to red stapler channel in this tutorial we are going to show
you how to create a neumorphic login form design using only CSS and HTML
ready? let's check it out
neumorphic design is another UI design that has become popular these days the
main concept is to use the light source and shadow in a way to create a soft 3d
effect that add focus to your element in our example you will see that the
login form looks like it's protruding from the background creating 3d like
impression to make neumorphic effect like this is actually pretty easy
using only CSS box shadow let's work on recreating this example together here's
the HTML page with some basic CSS setup like font setting flex display to center
the element and default text setting and background color
first let's start with adding div for the login from body
then set the size and padding in CSS
border-radius plays important role in neumorphic design to create a soft round
corner effect
since the login form is going to protrude from the body I'm going to use
the same background color
and here's the key part I'm going to use box shadow to create light effect
first let's add dark shadow at the bottom right side
then add bright color shadow at the top left side this will make the elements
looks like it has the light source illuminating from the top-left corner of
the screen
looks good now we are going to start adding content to the form
let's add a logo div followed by the title of the phone
and subtitle if you need it
okay let's work on the CSS first set the background image for the logo div
then set the size and 50% bottle radius to create a circle
and margin:0 auto to center it
next let's work on a box shadow first I'm going to add a small logo shadow
then add 5 pixels offset with the same color as locking for background
then add a bottom-right shadow and top left shadow like we did previously with
a login form body
and I'm going to add some CSS to set the font styles for the text
next I'm going to add the input fields username and password
I will also add a placeholder text
then add a sign-in button
for the CSS I'm going to set 100% width and padding for the input fields div
then for the input I'm going to remove the default input styles by setting
border, outline and background to none
then set the font size color and padding
next I'm going to add sunken effect to the input fields
first set the margin bottom and border-radius
then add box-shadow like we did previously except that this time we will
use inset instead
and next we will add some small icons to the input fields I'm going to use free
SVG icon you can find a link at the video description box below
copy the SVG code for website and place it in front of the
input fields
I will also change the fill color from white to gray
then set the height in CSS and add some margin
next let's work on the button first remove the default button styles by
setting outlined and border to none
then set cursor to pointer set the width and height
border-radius
and font setting
and finally set a green background color
next add a neumorphic effect using box shadow
then I'm going to add a mouse hover and mouse click color changing effect
also add a half second transition time
finally I'm going to add a forgot password and sign up link
for the CSS I'm going to add some top padding and set text align to Center
then for each link I will remove the underline by setting text decoration to none
and set the color and font size
and that's all for this tutorial if you love this video don't forget to like or
subscribe our channel to stay tuned thanks watching see you next time bye