diff --git a/src/components/gradient/gradient.module.css b/src/components/gradient/gradient.module.css
new file mode 100644
index 0000000..6595319
--- /dev/null
+++ b/src/components/gradient/gradient.module.css
@@ -0,0 +1,18 @@
+.gradient {
+  position: relative;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(90deg, #fcb0f3, #5b27ec);
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: inherit;
+    content: '';
+    filter: blur(10px);
+  }
+}
diff --git a/src/components/gradient/gradient.tsx b/src/components/gradient/gradient.tsx
new file mode 100644
index 0000000..3b15de5
--- /dev/null
+++ b/src/components/gradient/gradient.tsx
@@ -0,0 +1,5 @@
+import styles from './gradient.module.css';
+
+export function Gradient() {
+  return <div className={styles.gradient} />;
+}
diff --git a/src/components/gradient/index.ts b/src/components/gradient/index.ts
new file mode 100644
index 0000000..3dc3e9c
--- /dev/null
+++ b/src/components/gradient/index.ts
@@ -0,0 +1 @@
+export { Gradient } from './gradient';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 50fec53..64af0cb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from '@/layouts/layout.astro';
 
+import { Gradient } from '@/components/gradient';
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
 import { Footer } from '@/components/footer';
@@ -8,6 +9,7 @@ import { AboutSection, WhySection, ReadySection } from '@/components/sections';
 ---
 
 <Layout title="Welcome to Astro.">
+  <Gradient />
   <Hero />
   <App client:load />
   <AboutSection />