DEV Community

Cover image for Create Aurora Ui with CSS | Html Css tutorial By Code With Random
Codewith Random
Codewith Random

Posted on

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>  
Enter fullscreen mode Exit fullscreen mode

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;  
  }  
 }  
Enter fullscreen mode Exit fullscreen mode

Snapshot_21-08-10_08-37-47
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.

Create Radial gradient
Html
For reading full article visit our website! Thank you 🙏💕
https://www.codewithrandom.com/2021/08/create-aurora-ui-with-css-html-css.html

Discussion (0)