<div class="container">
  <div class="heart"></div>
</div>
<!--
Radial grdients dont seem to function right for me and i'm not sure why. They were working for me.

Gives a nice retro effect though.
-->
:root {
  --outline:black;
  --fill-1:red;
  --fill-2:darkred;
  --shine:white;
}
body {
  background: radial-gradient(#200, #700);
}
.heart {
	position:absolute;
	top:calc(50% - .5em);
	left:calc(50% - .5em);
	width:1em;
	height:1em;
	background:var(--fill-1);
	box-shadow:
  /* Outline */
	var(--outline) 0 5em,
	var(--outline) 0 -4em,
	var(--outline) 1em -5em,
	var(--outline) 2em -5em,
	var(--outline) 3em -5em,
	var(--outline) 4em -4em,
	var(--outline) 5em -3em,
	var(--outline) 5em -2em,
	var(--outline) 5em -1em,
	var(--outline) 5em 0,
	var(--outline) 4em 1em,
	var(--outline) 3em 2em,
	var(--outline) 2em 3em,
	var(--outline) 1em 4em,
	var(--outline) -1em 4em,
	var(--outline) -2em 3em,
	var(--outline) -3em 2em,
	var(--outline) -4em 1em,
	var(--outline) -5em 0em,
	var(--outline) -5em -1em,
	var(--outline) -5em -2em,
	var(--outline) -5em -3em,
	var(--outline) -4em -4em,
	var(--outline) -3em -5em,
	var(--outline) -2em -5em,
	var(--outline) -1em -5em,
	/* Shade */
	var(--fill-2) 0 4em,
	var(--fill-2) 1em 3em,
	var(--fill-2) 2em 2em,
	var(--fill-2) 3em 1em,
	var(--fill-2) 4em 0,
	var(--fill-2) 4em -1em,
	var(--fill-2) 4em -2em,
	var(--fill-2) 4em -3em,
	/* Shine */
	var(--shine) -3em -2em,
	var(--shine) -2em -3em,
	/* Fill */
	var(--fill-1) 0 1em,
	var(--fill-1) 0 2em,
	var(--fill-1) 0 3em,
	var(--fill-1) 1em 2em,
	var(--fill-1) 1em 1em,
	var(--fill-1) 2em 1em,
	var(--fill-1) 1em 0,
	var(--fill-1) 2em 0,
	var(--fill-1) 3em 0,
	var(--fill-1) 0 -1em,
	var(--fill-1) 1em -1em,
	var(--fill-1) 2em -1em,
	var(--fill-1) 3em -1em,
	var(--fill-1) 0 -2em,
	var(--fill-1) 1em -2em,
	var(--fill-1) 2em -2em,
	var(--fill-1) 3em -2em,
	var(--fill-1) 0 -3em,
	var(--fill-1) 1em -3em,
	var(--fill-1) 2em -3em,
	var(--fill-1) 3em -3em,
	var(--fill-1) 1em -4em,
	var(--fill-1) 2em -4em,
	var(--fill-1) 3em -4em,
	var(--fill-1) -1em 3em,
	var(--fill-1) -1em 2em,
	var(--fill-1) -2em 2em,
	var(--fill-1) -1em 1em,
	var(--fill-1) -2em 1em,
	var(--fill-1) -3em 1em,
	var(--fill-1) -1em 0,
	var(--fill-1) -2em 0,
	var(--fill-1) -3em 0,
	var(--fill-1) -4em 0,
	var(--fill-1) -1em -1em,
	var(--fill-1) -2em -1em,
	var(--fill-1) -3em -1em,
	var(--fill-1) -4em -1em,
	var(--fill-1) -1em -2em,
	var(--fill-1) -2em -2em,
	var(--fill-1) -4em -2em,
	var(--fill-1) -1em -3em,
	var(--fill-1) -3em -3em,
	var(--fill-1) -4em -3em,
	var(--fill-1) -1em -4em,
	var(--fill-1) -2em -4em,
	var(--fill-1) -3em -4em;
}
.container {
	position:absolute;
  width:11em;
  height:11em;
	top:calc(50% - 5.5em);
	left:calc(50% - 5.5em);
  transition:1s ease;
}
.container:hover{
  transform:scale(1.5);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.