Create Aurora Ui with CSS | Html Css tutorial By Code With Random

Create Aurora Ui with CSS | Html CSS tutorial By Code With Random

Create Aurora Ui with CSS | Html CSS tutorial By Code With Random

Hello, guys welcome to the Code With Random blog! Today we learn to create aurora ui with pure CSS. We provide you full code in this blog post you also easily copy the code and understand that's how Aurora ui creates with the help of CSS. So let's start with simple steps.


Create a Simple Html structure

 <h1>Aurora UI</h1>  
 <div class="blurred">  
  <h2>Blurred shapes</h2>  
  <div class="wrapper">  
   <div class="one"></div>  
   <div class="two"></div>  
   <div class="three"></div>  
  </div>  
 </div>  

In this HTML code, we first h1 for Aurora ui then create div with class blurred, In div, we create div with class wrapper or in wrapper we create 3divs with class one, two, three.

Apply css/scss to aur HTML 

 * {  
  box-sizing: border-box;  
 }  
 body {  
  background: #0e0e0e;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
  padding: 100px;  
  font-family: Helvetica, Arial;  
  > div {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   justify-content: center;  
   margin-bottom: 100px;  
  }  
 }  
 h1 {  
  color: #fff;  
  font-size: 52px;  
 }  
 h2 {  
  color: #fff;  
  font-size: 36px;  
 }  
 .wrapper {  
  width: 400px;  
  height: 400px;  
  background: #fff;  
  position: relative;  
  overflow:hidden;  
  border-radius: 40px;  
 }  
 .wrapper div {  
  position: absolute;  
  filter: blur(60px);  
  opacity: 0.8;  
 }  
 // Basic blured shapes  
 .blurred {  
  .one {  
   border-radius: 100%;  
   width: 600px;  
   height: 600px;  
   background-color: #373372;  
   left:-50px;  
   top:-300px;  
   z-index: 3;  
  }  
  .two {  
   width: 500px;  
   height: 800px;  
   background-color: #7C336C;  
   bottom:-30px;  
   left:-80px;  
  }  
  .three {  
   border-radius: 100%;  
   width: 450px;  
   height: 450px;  
   bottom:-80px;  
   right:-100px;  
   background-color: #B3588A;  
  }  
 }  

Output

Create Aurora Ui with CSS | Html CSS tutorial By Code With Random

Also, we use Scss in this CSS body tag in div. You can easily see how we create this simple Aurora Design with help of CSS we have some more designs so let's take to look at them.

Hamburger Menu html css javascript

Create Radial gradient

Html

 <div class="radial">  
  <h2>Radial gradient</h2>  
  <div class="wrapper"></div>  
 </div>  

In this radial gradient design, we use simple 2 divs & h1 for heading. Let's style our radial design

CSS/scss
 * {  
  box-sizing: border-box;  
 }  
 body {  
  background: #0e0e0e;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
  padding: 100px;  
  font-family: Helvetica, Arial;  
  > div {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   justify-content: center;  
   margin-bottom: 100px;  
  }  
 }  
 h1 {  
  color: #fff;  
  font-size: 52px;  
 }  
 .wrapper {  
  width: 400px;  
  height: 400px;  
  background: #fff;  
  position: relative;  
  overflow:hidden;  
  border-radius: 40px;  
 }  
 .radial {  
  .wrapper {  
   background-color: #fff;  
   background-image:   
    radial-gradient(at top left, #F0ACE0, transparent),  
    radial-gradient(at top right, #FFA4B2, transparent),  
    radial-gradient(at bottom left, #A7D3F2, transparent);  
   background-size: 100% 100%;  
   background-repeat: no-repeat;  
  }  
 }  

Output

Create Aurora Ui with CSS | Html CSS tutorial By Code With Random

Hope you understand all our CSS code basically this article code content by the Codepen developer so we give a link to don't forget to check out!


Code credit - Albert
written by - code with random/Anki

Post a Comment

Previous Post Next Post