Frontend Challenge: June Beach Sunset
Tags: frontendchallenge, devchallenge, css
Published: 2024-06-08 19:45:26

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-05-29), CSS Art: June._

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

## Demo 
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->

![Sunset on the ocean](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42j4qa9dpossrui0639u.jpg)

```html
<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>


```


```css
.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.

![Sunset over an ocean.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj62y1wauc4url5423bq.jpg)