background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

dabblet.css

.menu {
	display: flex;
	align-items: center;
	
}
.menu__item:before {
    content: '';
    background: linear-gradient(-90deg, #168dcf00, #168dcfff);
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.menu__item {
    overflow: hidden;
    position: relative;
	padding: 1rem 3rem 1rem 1rem;
	border: #0962be solid;
	border-width: 2px 0;
	margin: 1rem;   
	color: white;
    background: linear-gradient(-90deg, #01002400, #010024ff);
}

.menu__item:hover:before {
	border-color: #00d8e9;
	color: white;
    
	transition: left 0 500ms linear;
}

.menu__item:hover {
	color: #00d8e9;

	animation: gradient 1s ease;
}

body {
/* 	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite; */
   background:	#012148;
   color: white;
}

@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

dabblet.html

<h1>Menu</h1>
<nav class="menu">
	<a href="#" class="menu__item">Menu 1</a>
	<a href="#" class="menu__item">Menu 2</a>
	<a href="#" class="menu__item">Menu 3</a>
	<a href="#" class="menu__item">Menu 4</a>
	<a href="#" class="menu__item">Menu 5</a>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}