< Back to Frontend Friday Folks Index

Candle

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (540 characters)
1 
<div f></div>
2 
<style>
3 
  [f] {
4 
    width: 30px;
5 
    height: 50px;
6 
    background: #F3AC3C;
7 
    border-radius: 60px 0;
8 
    position:fixed;
9 
    top:60;
10 
    left:200;
11 
  }
12 
  body{
13 
    background:
14 
      radial-gradient(ellipse 60px 30px,#14313E 30px,#0000 0) 50% -35px no-repeat,
15 
      radial-gradient(ellipse 80px 30px,#F3695A 40px,#0000 0) 50% -25px no-repeat,
16 
      radial-gradient(ellipse 80px 30px,#BA3E46 40px,#0000 0) 50% 75px no-repeat,
17 
      linear-gradient(#BA3E46,#BA3E46) 50% 127px / 80px 100px no-repeat,
18 
      #14313E;
19 
  }
20 
</style>
21

The flame was definitely easier to do with border radius. I think this is something I shouldn't even try with gradients anymore... 😅

< Back to Frontend Friday Folks Index