< Back to Frontend Friday Folks Index

Sunset

Highlighted solution (426 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #191919;
5 
    display: grid;
6 
    place-items: center;
7 
  }
8 
  div {
9 
    background:
10 
      radial-gradient(circle at 100% 100%, #824B20 100px, #0000 0),
11 
      radial-gradient(circle at 0 100%, #E08027 100px, #0000 0),
12 
      radial-gradient(circle, #FFF58F 30px, #0000 0) 0 20px,
13 
      #F2AD43;
14 
    width: 150px;
15 
    height: 200px;
16 
    border-radius: 75px 75px 20px 20px;
17 
  }
18 
</style>
19
Ari, Satoshi and I were doing this together today. This was a nice puzzle to do with radial gradients again!
Highlighted solution (902 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #191919;
5 
    display: grid;
6 
    place-items: center;
7 
  }
8 
  div {
9 
    background:
10 
      radial-gradient(circle at 100% 100%, #999 90px, #bbb 100px, transparent 0) no-repeat,
11 
      radial-gradient(circle at 0 100%, #666 90px, #999 100px, transparent 0) no-repeat,
12 
      radial-gradient(circle at 50% 120px, #FFF58F 30px, #f30 0 50px, #f60 60px, #f90 70px, transparent 100px) no-repeat,
13 
      deepskyblue;
14 
    width: 150px;
15 
    height: 200px;
16 
    border-radius: 75px 75px 20px 20px;
17 
    animation: anim 2s infinite ease-in-out;
18 
  }
19
20 
  @keyframes anim {
21 
    0% {
22 
      rotate: -15deg;
23 
      background-position-y: 0, 0, -50px, 0;
24 
    }
25 
    50% {
26 
      rotate: 15deg;
27 
      background-position-y: 0, 0, 50px, 0;
28 
      background-position-x: 50px, -50px, 0, 0;
29 
    }
30 
    100% {
31 
      rotate: -15deg;
32 
      background-position-y: 0, 0, -50px, 0;
33 
    }
34 
  }
35 
</style>
Since we were done pretty quickly, we played around with different gradients, came up with some kind of psychedelic effect and added some animation to the mix.
< Back to Frontend Friday Folks Index