HTML CSS Dropmorphism UI Design Code
Welcome to the Codewithrandom blog. In this blog, We learn how to create HTML CSS Dropmorphism UI Design. We use HTML and CSS for this Dropmorphism UI Design Code.
I hope you enjoy our blog so let’s start with a basic html structure for a Dropmorphism UI Design.
HTML Code For Dropmorphism UI Design
<div class="c"> <div class="drop drop1"></div> <div class="drop drop2"></div> <div class="text-c"> <h1>DROPMORPHISM</h1> <p>Both the drops are created using CSS</p> </div> </div>
There is all html code for theDropmorphism UI Design. Now, you can see output without Css, then we write Css Code For for Dropmorphism UI Design.
50+ HTML, CSS & JavaScript Projects With Source Code
Html Code Output
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap'); body { height: 100vh; margin: 0; display: grid; place-items: center; background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); background: #318CFE; font-family: 'Montserrat', sans-serif; } .c { position: relative; } .text-c { display: grid; place-items: center; position: relative; } h1 { position: relative; font-size: 72px; color: white; line-height: 0; } .drop { position: absolute; height: 200px; width: 200px; background: #54ABFB; border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%; opacity: 0.8; border: 2px solid #3d93ff; } .drop::before { content: ""; position: absolute; height: 100%; width: 100%; background: #318CFE; border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%; box-shadow: -20px 30px 16px #1B6CFB, -40px 60px 32px #1b6cfb, inset -6px 6px 10px #1B6CFB, inset 2px 6px 10px #1a74e5, inset 20px -20px 22px white, inset 40px -40px 44px #a8ceff; } .drop::after { content: ""; position: absolute; height: 40px; width: 40px; background: #E6FDFB; border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%; left: 130px; top: 40px; box-shadow: 16px 40px 0 -10px white; opacity: 0.8; } .drop1 { left: -100px; top: -50px; } .drop2 { right: -100px; bottom: -50px; z-index: -1; border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%; } .drop2::before { border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%; } p { line-height: 0; color: white; font-size: 20px; font-family: "Montserrat" }
Now we have completed our Css Code for Dropmorphism UI Design. Here is our final updated output HTML + CSS.
Restaurant Website Using HTML And CSS With Source Code
Final Output
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Hope you like the css Dropmorphism UI 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 HTML CSS Dropmorphism UI Design Code. 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