.flame
View Compiled
body{
	background:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
}

.flame{
	width:150px;
	height:150px;
	background:linear-gradient(-45deg, red, orange);
	border-radius: 150px 150px 0px 150px;
	transform:rotate(-135deg);
	animation:.1s flame infinite;
	filter:blur(10px);
	position:relative;
	box-shadow:17px 20px 90px #700;
	border:45px solid black;
	border-left-width:25px;
	border-top-width:25px;
	
	&:after,
	&:before{
		content:'';
		width:100px;
		height:100px;
		display:block;
		position:absolute;
		background:linear-gradient(-45deg, red, orange);
		animation:.2s flame infinite;
		transform:scale(.8) rotate(20deg);
		border-radius: 100px 100px 0px 100px;
		top:20px;
	}
	&:before{
		top:0;
		animation-duration:.09s;
		transform:scale(.9) rotate(-15deg) translate(10px, 0px);
	}
}

@keyframes flame{
  0% {height:150px; width:150px;}
  50% {height:140px; width:140px;}
  100% {height:150px; width:150px;}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.