Colorized Text

Applies customizable multi-color styling to text content.

Be Radient

1. Copy the component file

Create a new file called colorized-text.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import { memo, useMemo } from "react";
import styles from "./colorized-text.module.css";

const ColorizedText = (props) => {
  const {
    text,
    colors = [
      "currentColor"
    ],
    variant = "gradient",
  } = props;

  const isGradient = variant === "gradient";

  const gradient = useMemo(() => {
    if (isGradient) {
      return `linear-gradient(to right, ${colors.join()})`
    }
  }, [isGradient, colors]);

  return (
    <span
      aria-hidden={!isGradient}
      className={[
        styles["aurora-text"],
        isGradient ? styles["gradient"] : "",
      ].join(" ")}
      style={{
        "--gradient": gradient,
      }}
    >
      {isGradient ? (
        text
      ) : (
        text.split("").map((letter, letterIndex) => (
          <span
            key={`letter-${letterIndex}`}
            aria-hidden={true}
            className={styles["letter"]}
            style={{
              "--color": colors[letterIndex % colors.length]
            }}
          >
            {letter}
          </span>
        ))
      )}
    </span>
  );
};

export default memo(ColorizedText);

2. Copy the CSS module file

In the same folder, create a file called colorized-text.module.css and paste the following CSS.

.aurora-text {
  &.gradient {
    background: var(--gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  > .letter {
    color: var(--color);
  }
}

3. Use the component

Now you can import and use the component anywhere in your project.

import ColorizedText from "@/components/text-effects/colorized-text/colorized-text";

/* keep text on center */
const wrapperStyles = {
  textAlign: "center",
  padding: "24px",
  textWrap: "balance",
};

const ColorizedTextPreview = () => {
  return (
    <div style={wrapperStyles}>
      <h1 style={{ fontSize: "4rem" }}>
        Be <ColorizedText
          colors={[
            "#FF416C",
            "#FF4B2B",
            "#FFD200"
          ]}
          text="Radient"
        />
      </h1>
    </div>
  );
};

export default ColorizedTextPreview;

Customize letter color

import ColorizedText from "@/components/text-effects/colorized-text/colorized-text";

const ColorizedTextStyleLetterPreview = () => {
  return (
    <h1 style={{ fontSize: "5rem" }}>
      <ColorizedText 
        variant="standard"
        colors={[
          "#FF0000", 
          "#FFA500", 
          "#FFFF00", 
          "#008000", 
          "#0000FF", 
          "#4B0082", 
          "#EE82EE"
        ]}
        text="Rainbow"
      />
    </h1>
  );
};

export default ColorizedTextStyleLetterPreview;

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
text	`string`	Yes	—	The text content to display.
colors	`string[]`	No	[]	Array of colors to apply to the text. If empty, inherits the current text color.
variant	`"gradient" \| "standard"`	No	`"gradient"`	Determines how the colors are applied. • `"gradient"`: applies a smooth gradient across the text. • `"standard"`: applies each color in `colors` sequentially to each character; cycles through if there are more characters than colors.