Over the past couple of months, there has been a rise in a new UI trend called ‘Neumorphism’. While some predict it to be the biggest trend of 2020, many others doubt it. Even though the UI appears to be modern and sleek, its application in practical use seems to be doubtful due to the lack of contrast in the UI.
Keeping the pros and cons of this UI aside, let us discuss what Neumorphism actually is and how we can use CSS to create this effect. Neumorphism mainly includes experimenting with shadows. You can use this ‘Neumorphism UI Shadow Tool’ to create the perfect shadows. Here you can play around with the shadow opacity, intensity, colors and much more to get the desired result. The tool generates CSS code for you which you can directly copy-paste.
HTML:
<span contenteditable="true">NEUMORPHISM</span>CSS:
Styling Body:
To style the span element, we first center it. Here is a guide on centering elements with CSS. The font color of the span should be the same as that of the background. You can use any font-family and font-size of your choice.
body{
background-color: #e0e5eb;
padding: 0;
margin: 0;
}
Styling Text:
Now the final and most important step; Adding shadows. The first shadow will be a white shadow with a low opacity. Try adjusting the blur radius till the shadow looks well blended. The second shadow will be the same except this time it is black and might have different opacity.
You can now adjust the v and h-offset to get the desired result. And there you have it.
span{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-family: 'Poppins',sans-serif;
font-size: 150px;
color: #e0e5eb;
text-shadow:
-8px -8px 12px rgba(255,255,255,0.4),
8px 8px 12px rgba(0,0,0,0.08);
caret-color:#262626;
outline: none;
}Your Neumorphic Text Effect is now ready. Not only it looks cool, but it is also easy-peasy to create.
I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube.
