diff --git a/src/components/FlatButton/FlatButton.stories.mdx b/src/components/FlatButton/FlatButton.stories.mdx
index 7f8f536..b767198 100644
--- a/src/components/FlatButton/FlatButton.stories.mdx
+++ b/src/components/FlatButton/FlatButton.stories.mdx
@@ -70,6 +70,12 @@ import { FlatButton } from 'lapras-frontend'
         template: '<FlatButton skin="disabled">label</FlatButton>',
     }}
   </Story>
+  <Story name="skin: rainbow">
+    {{
+        components: { FlatButton },
+        template: '<FlatButton skin="rainbow">label</FlatButton>',
+    }}
+  </Story>
 </Preview>
 
 ## Sizes
diff --git a/src/components/FlatButton/FlatButton.vue b/src/components/FlatButton/FlatButton.vue
index cb7e04f..54c214e 100644
--- a/src/components/FlatButton/FlatButton.vue
+++ b/src/components/FlatButton/FlatButton.vue
@@ -39,6 +39,7 @@ export default defineComponent({
         | 'secondary'
         | 'tertiary'
         | 'muted'
+        | 'rainbow'
         | 'disabled'
       >,
       default: 'primary',
@@ -141,6 +142,10 @@ export default defineComponent({
     font-size: 12px;
     min-height: 28px;
   }
+
+  &.skin-rainbow {
+    background: -webkit-linear-gradient(left, red, violet);
+  }
 }
 
 .body {