.hover-gradient {
	background: #000;
	background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-size: 400% 400%;
	background-repeat: no-repeat;
	display: flex;
	width: 500px;
	height: 500px;
	max-width: 100vw;
	max-height: 100vh;
	justify-content: center;
	align-items: center;
	color: #fff;
	position: relative;
	cursor: pointer;
	transition: 0.5s all;
  }

  .hover-gradient:hover {
	background-position: 100% 100%;
  }