Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

• HTML
• CSS
• Javascript

xxxxxxxxxx

<div class="c">

  <div class="drop drop1"></div>

  <div class="drop drop2"></div>

  <div class="text-c">

    <h1>Code. Content. Community</h1>

    <p>Both the drops are created using CSS.</p>

  </div>

</div>

​

xxxxxxxxxx

  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;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&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;

  font-family: 'Poppins', sans-serif;

}

​

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 {

​

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.