<div class="wrapper">
	<div class="center">
		<div class="candle">
			<div class="candle-flame"></div>
			<div class="candle-wick"></div>
			<div class="candle-wax"></div>
			<div class="candle-stand"></div>
		</div>
	</div>
</div>
*,
*::before,
*::afeter {
	box-sizing: border-box;
}

// global colors

$background: #2d3d50;
$flame: #ffad00;
$flame-shadow: #ffad00;
$wax: #ffffff;
$wax-shadow: #d8deed;
$wick: #ad87a9;
$stand: #1c233e;

html,
body {
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: darken($background, 10%);
}

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 4px;
	box-shadow: 4px 8px 16px 0 #00000010;
	overflow: hidden;
	background: $background;
}

// to center the candle i used another div with transform on it

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

// candle nesting

.candle {
	display: flex;
	flex-direction: column;
	align-items: center;

	&-flame {
		width: 15px;
		height: 30px;
		background: $flame;
		border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
		box-shadow: 0px 0px 20px 0px $flame-shadow;
		animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
	}

	&-wick {
		height: 10px;
		width: 3px;
		background: $wick;
	}

	&-wax {
		width: 40px;
		height: 110px;
		background: $wax;
		border-radius: 6px;
		box-shadow: inset -15px 0px 0px -10px $wax-shadow;
	}

	&-stand {
		width: 100px;
		height: 8px;
		background: $stand;
		border-radius: 3px;
	}
}

// animations

@keyframes flame-twirl {
	0%,
	22%,
	49%,
	62%,
	81%,
	100% {
		border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
	}
	14%,
	32%,
	56%,
	70%,
	89% {
		border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
	}
}

@keyframes glow {
	0%,
	30%,
	60%,
	80%,
	100% {
		box-shadow: 0 0 20px 0 #ffad00;
	}
	20%,
	50%,
	70% {
		box-shadow: 0 0 22px 0 #ffad00;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.