Skip to content

Instantly share code, notes, and snippets.

Created July 5, 2023 17:58
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Rainbow Text using enchanted land font
import localFont from 'next/font/local';
const enchantedLandFont = localFont({ src: './enchanted-land.ttf' });
const headerStyle = (colors) => ({
display: 'inline',
margin: 0,
fontSize: 500,
fontWeight: 400,
background: `-webkit-linear-gradient(left, ${colors.join(', ')})`,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
const headerStyle1 = headerStyle(['red', 'orange', 'yellow', 'green', 'blue', 'purple']);
const headerStyle2 = headerStyle(['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']);
export default function CocktailPartyJson() {
return (
<main className={enchantedLandFont.className}>
<h1 style={headerStyle1}>
<h1 style={headerStyle2}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment