JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="el"></div>

SCSS

:root {
	--width: 0%;
}

.el {
	border: 1px solid;
	display: block;
	height: 300px;
	width: 300px;

	background-image: linear-gradient( to bottom, red 0%, blue 100% );
	background-position: 100% 0%;
	background-repeat: no-repeat;
	background-size: var(--width), 100%;
	transition: background-size 500ms;

	&:hover {
		--width: 100%;
	}
}