Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@property --rotation {
	syntax: "<angle>";
	initial-value: 0turn;
	inherits: false;
}

html,
body {
	height: 100%;
	font-size: 24px;
}

body {
	display: grid;
	place-content: center;
	background: #202020;
}

.glow-card {
	aspect-ratio: 1;
	position: relative;
	color: white;
	padding: 2rem;
	border-radius: 1rem;
	overflow: hidden;
	display: grid;
	place-content: center;

&::before {
		position: absolute;
		inset: 0;
		content: "";
		z-index: -2;
		background-image: conic-gradient(
			from var(--rotation, 0turn),
			#007498,
			#00d493,
			#d91982,
			#f5a95b,
			#007498
		);
		animation: 7s hue-rotation infinite linear;
	}

&::after {
		position: absolute;
		width: 94%;
		height: 94%;
		top: 3%;
		left: 3%;
		border-radius: 0.7rem;
		content: "";
		z-index: -1;
		background: black;
		filter: blur(12px);
	}
}

@keyframes hue-rotation {
	from {
		--rotation: 0turn;
	}
	to {
		--rotation: 1turn;
	}
}

Frontend Forever App