Claymorphism CSS Pure Design | Claymorphism Form – UI Trend 2022

Claymorphism CSS Pure Design | Claymorphism Form – UI Trend 2022

 Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Claymorphism Design using CSS. We use HTML & CSS  for Claymorphism Design. Hope you enjoy our blog so let’s start with a basic HTML structure for the Claymorphism Design.

HTML code

 <div class="wrapper">  
<h1 class="header">CODEWITHRANDOM</h1>
<p class="headerText">Thank you for Being with me</p>
<form>
<div class="inputWrapper">
<label for="name">Name</label>
<input id="name" type="text" autocomplete="off" required>
</div>
<div class="inputWrapper">
<label for="email">E-mail</label>
<input id="email" type="email" autocomplete="off" required>
</div>
<div class="inputWrapper">
<label for="password">Password</label>
<input id="password" type="password" required>
</div>
<div class="inputWrapper">
<label for="repeatPassword">Repeat password</label>
<input id="repeatPassword" type="password" required>
</div>
<button type="submit" class="submitButton">Register</button>
</form>
</div>

There is all HTML code for the Claymorphism Design. Now, you can see output without CSS, then we write CSS for the Claymorphism Design.

Output

Claymorphism Design CSS code 

 * {  
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background: #a2caff;
color: #576d95;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper {
max-width: 400px;
width: 100%;
padding: 30px;
border-radius: 30px;
background: #fff;
box-shadow: 0 35px 68px 0 rgba(136, 174, 222, 0.42), inset 0 -8px 16px 0 #b9d1f1;
}
.header {
font-size: 36px;
font-weight: 500;
margin: 0 0 12px;
text-align: center;
}
.headerText {
font-size: 16px;
margin: 0 0 24px 0;
text-align: center;
}
.inputWrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin: 0 0 16px 0;
}
.inputWrapper label {
margin: 0 0 4px 0;
}
.inputWrapper input {
width: 100%;
height: 40px;
padding: 8px 16px;
font-size: 16px;
border-radius: 8px;
border: 1px solid #b5d4ff;
color: #576d95;
outline-color: #236eb9;
}
.submitButton {
border: none;
padding: 12px 30px;
margin: 0 auto;
display: block;
font-size: 16px;
color: #fff;
border-radius: 8px;
background-image: linear-gradient(90deg, #5fc7ff 50%, #43a8ff 100%);
background-size: 200% 100%;
background-position: 100% 100%;
transition: background-position 256ms;
will-change: background-position;
cursor: pointer;
}
.submitButton:hover {
background-position: 0% 200%;
}
.link {
font-size: 16px;
margin: 50px 0 0 0;
display: block;
max-width: 400px;
width: 100%;
padding: 50px;
text-align: center;
color: #576d95;
border-radius: 30px;
background: #fff;
box-shadow: 0 35px 68px 0 rgba(136, 174, 222, 0.42), inset 0 -8px 16px 0 #b9d1f1;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Claymorphism Design, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Claymorphism Design using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Albert

Check out more…..

Leave a Reply