< Back to Frontend Friday Folks Index

Candle

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