Gradient
JSX
import clsx from "clsx";
import styles from "./style.module.scss";
const Gradient = ({
children,
className,
colors = [
"var(--purple)",
"var(--blue)",
"var(--green)",
"var(--orange)",
"var(--red)",
],
tag: Tag = "span",
}) => {
const gradient = Array(2).fill(colors).flat().join(", ");
return (
<Tag
className={clsx(styles.Gradient, className)}
style={{
backgroundImage: `linear-gradient(135deg, ${gradient})`,
backgroundSize: `${colors.length * 66}% 100%`,
}}
>
{children}
</Tag>
);
};
export default Gradient;
SCSS
.Gradient {
animation: gradient 5s infinite linear;
display: inline-block;
-webkit-background-clip: text;
background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
@keyframes gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
}