Viel Spaß, Ramez

components/GradientText.css

@@ -0,0 +1,65 @@
+.animated-gradient-text {
+	position: relative;
+	margin: 0;
+	display: flex;
+	max-width: fit-content;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	backdrop-filter: blur(10px);
+	transition: box-shadow 0.5s ease-out;
+	overflow: hidden;
+}
+
+.gradient-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-size: 300% 100%;
+	animation: gradient linear infinite;
+	border-radius: inherit;
+	z-index: 0;
+	pointer-events: none;
+}
+
+.gradient-overlay::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	border-radius: inherit;
+	width: calc(100% - 2px);
+	height: calc(100% - 2px);
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	background-color: #060010;
+	z-index: -1;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+.text-content {
+	display: inline-block;
+	position: relative;
+	z-index: 2;
+	background-size: 300% 100%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	animation: gradient linear infinite;
+}