diff --git a/src/components/Gradient/index.ts b/src/components/Gradient/index.ts
deleted file mode 100644
index 3ca07014..00000000
--- a/src/components/Gradient/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from "@emotion/styled";
-import gradient from "random-gradient";
-
-export type Gradient = {
-  hash?: string;
-  direction?: "radial" | "vertical" | "horizontal";
-};
-
-export const Gradient = styled.div<Gradient>`
-  min-width: 100%;
-  min-height: 120px;
-  background: ${({ hash, direction = "vertical" }) =>
-    gradient(ensureHash(hash), direction)};
-`;
-
-const ensureHash = (hash?: string) => hash || Math.random();
diff --git a/src/components/Gradient/index.tsx b/src/components/Gradient/index.tsx
new file mode 100644
index 00000000..40ac8953
--- /dev/null
+++ b/src/components/Gradient/index.tsx
@@ -0,0 +1,24 @@
+import { FC } from "react";
+import gradient from "random-gradient";
+
+export type Gradient = {
+  hash?: string;
+  direction?: "radial" | "vertical" | "horizontal";
+};
+
+export const Gradient: FC<Gradient> = ({
+  hash,
+  direction = "vertical",
+  ...props
+}) => (
+  <div
+    style={{
+      minWidth: "100%",
+      minHeight: "120px",
+      background: gradient(ensureHash(hash), direction),
+    }}
+    {...props}
+  />
+);
+
+const ensureHash = (hash?: string) => hash || Math.random();