diff --git a/css_gradient_border/index.html b/css_gradient_border/index.html
new file mode 100644
index 00000000..55b7c418
--- /dev/null
+++ b/css_gradient_border/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Hacktoberfest
+
+
+ Happy
Hacktoberfest!
+
+
diff --git a/css_gradient_border/style.css b/css_gradient_border/style.css
new file mode 100644
index 00000000..eb1201de
--- /dev/null
+++ b/css_gradient_border/style.css
@@ -0,0 +1,66 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+:root {
+ --border-width: 3px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+ background: #222;
+}
+
+.gradient-border {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 500px;
+ height: 400px;
+ font-family: 'Roboto', sans-serif;
+ font-size: 2.5rem;
+ text-transform: uppercase;
+ color: white;
+ background: #222;
+ border-radius: var(--border-width);
+}
+
+.gradient-border::after {
+ position: absolute;
+ content: '';
+ top: calc(-1 * var(--border-width));
+ left: calc(-1 * var(--border-width));
+ z-index: -1;
+ width: calc(100% + var(--border-width) * 2);
+ height: calc(100% + var(--border-width) * 2);
+ background: linear-gradient(
+ 60deg,
+ hsl(224, 85%, 66%),
+ hsl(269, 85%, 66%),
+ hsl(314, 85%, 66%),
+ hsl(359, 85%, 66%),
+ hsl(44, 85%, 66%),
+ hsl(89, 85%, 66%),
+ hsl(134, 85%, 66%),
+ hsl(179, 85%, 66%)
+ );
+ background-size: 300% 300%;
+ background-position: 0 50%;
+ border-radius: calc(2 * var(--border-width));
+ animation: moveGradient 4s alternate infinite;
+}
+
+@keyframes moveGradient {
+ 50% {
+ background-position: 100% 50%;
+ }
+}
\ No newline at end of file