Frontend Challenge: June Beach Sunset

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

June can mean travel and beach sunsets. I made a CSS Sunset.

Demo

<div class="flex-container">
<div class="main">
    <div class="outer_frame">
        <div class="wrapper_container">
            <div class="wrapper">
                <div class="sky">
                    <div class="sun"></div>
                </div>
                <div class="ocean">
                    <div class="reflect">
                        <div class="wave_group_sun">
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                            <div class="wave"></div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
        </div>
    </div>
</div>

.wrapper_container {
  width: 900px;
  height: 400px;
  display: flex;
  align-items: center; 
}

.wrapper{
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  overflow: hidden;
}

.sky {
  width: 900px;
  height: 250px;
  background: 
      linear-gradient( to top,
      var(--Yellow) 14%, 
      orange,
      var(--Red),
      var(--Pink)
    );
  display: flex;
  justify-content: center;
}


.ocean {
  width: 900px;
  height: 250px;
  background: linear-gradient(#4981b3, navy);
  border-top: 2px solid #3030a0c9;

  display: flex;
  overflow: hidden;
  justify-content: center;
  position: relative;
}

.sun{
  width: 200px;
  height: 422px;
  transform: rotate(90deg);
  border-radius: 50%;
  margin-top: 48px;
  background: linear-gradient(to left,
 rgb(255 215 0 / 38%), 
  #ffa5007d, rgb(255 0 0 / 26%), 
  rgb(255 0 167 / 34%));
  filter: drop-shadow(-2px 2px 13px #FF5722);

}

.reflect {
  width: 200px;
  height: 422px;
  transform: rotate(90deg);
  border-radius: 50%;
  margin-top: -200px;
  background: linear-gradient(to left,
 rgb(255 215 0 / 38%)
   #ffa5007d, rgb(255 0 0 / 26%),
   rgb(255 0 167 / 34%));
  filter: drop-shadow(-2px 2px 13px var(--Red));
  filter: blur(4px);
}

.wave_group_sun{
  transform: rotate(90deg);
    position: relative;
    justify-content: space-evenly;
}

.wave {
  background: var(--White);
  height: 3px;
  width: auto;
  border-radius: 20%;
  margin-bottom: 68px;
  filter: blur(2px);
}

Journey

The sunset is made using multiple gradients. The sky uses Yellow, red, orange and pink. Going from bottom to top. Originally it was top to bottom but that blended too much with the Sun.
The sun and reflection uses similar colors flowing right to left in a rotated circle. With the reflection using a bit of blur.
The Ocean is made of blue gradients with white lines for wave crests.

A view with a background.

Blog

Frontend Challenge: June Beach Sunset

Chris Jarvis

Inspiration

Demo

Journey

Join Our Newsletter. No Spam, Only the good stuff.

Related