CodingSparkles

How to Create the Sun Set in Pure CSS?

CSS

2 min read

October 17, 2021

Photo by Quino Al on Unsplash

In this article, I’m going to share the steps to create the Sun Set (CSS battle challenge) using pure CSS.

Step 1: Create the HTML elements

Create the required HTML elements as mentioned in the following code snippets.
In this example, I have used Three Div elements (i.e. child elements with class name child-mid, child-2 and child-3) under One parent Div element (i.e. element with class name parent).

HTML Element Structure

<div class="parent">
  <div class="child-mid"></div>
  <div class="child-2 child"></div>
  <div class="child-3 child"></div>
</div>

Step 2: Styles to create Sun Set

Basic Style (To display elements in the center and apply background color)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: 95vh;
}

To create the Sky (Behind Sunset and Hills)

.parent {
  height: 200px;
  width: 150px;
  border-radius: 100px 100px 10% 10%;
  background-color: #f2ad43;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

To create the left side Hill

.child-2 {
  background-color: #e08027;
  border-radius: 0 100px 0 0;
  margin-right: -25px;
  position: relative;
}

To create the right side Hill

.child-3 {
  background-color: #824b20;
  border-radius: 100px 0 0 0;
  margin-left: -35px;
  position: relative;
}

To create the Sun

.child-mid {
  background: #fff58f;
  align-self: center;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  position: absolute;
  top: 90px;
  right: 47px;
}