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; } } }