Description:-

Hello everyone! In this video, you are going to learn "How to create DROPMORPHISM UI DESIGN -USING HTML & CSS ".

Let's see!

DROPMORPHISM UI DESIGN - Codexbaba

You Might Also Like ➝

•Glowing Neon Button With Hover effect 

• Custom Select Box - Using HTML & CSS

• Awesome Web Page Preloader - Using HTML & CSS 

• Flame Effect Text - Using HTML & CSS 

• The Glassmorphism Social Button | Using HTML & CSS

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

DROPMORPHISM UI DESIGN   - USING HTML & CSS 

HTML 

<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>

CSS

@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" }

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width