diff --git a/docs/components/Swiper.mdx b/docs/components/Swiper.mdx
index 470b6382..41fa7812 100644
--- a/docs/components/Swiper.mdx
+++ b/docs/components/Swiper.mdx
@@ -54,3 +54,25 @@ import { PlayGroundBanner } from '../docsComponents';
     </Slide>
   </Swiper>
 </Playground>
+
+## Fade Effect Swiper 
+
+<Playground>
+  <Swiper effect="fade">
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.red100} fill>
+        배너1
+      </PlayGroundBanner>
+    </Slide>
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.blue200} fill>
+        배너2
+      </PlayGroundBanner>
+    </Slide>
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.orange300} fill>
+        배너3
+      </PlayGroundBanner>
+    </Slide>
+  </Swiper>
+</Playground>
diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx
index 05453716..c3218563 100644
--- a/src/components/Swiper/index.tsx
+++ b/src/components/Swiper/index.tsx
@@ -3,18 +3,18 @@ import React, { FC, MutableRefObject, ReactNode, useEffect, useRef, useState } f
 import { SwiperOptions } from 'swiper';
 import {
   Autoplay,
+  EffectFade,
+  Keyboard,
+  Lazy,
   Navigation,
   Pagination,
   Swiper as OriginalSwiper,
   Virtual,
-  Lazy,
-  Keyboard,
 } from 'swiper/dist/js/swiper.esm.js';
-
 import { createUniqIDGenerator } from '../../utils/createUniqIDGenerator';
 import { DefaultNavigation } from './DefaultNavigation';
 
-OriginalSwiper.use([Navigation, Pagination, Autoplay, Virtual, Lazy, Keyboard]);
+OriginalSwiper.use([Navigation, Pagination, Autoplay, Virtual, Lazy, Keyboard, EffectFade]);
 
 export type SwiperInstance = OriginalSwiper;