Multiple colour text transition
Answered
Basense posted this in #help-forum
BasenseOP
I'd like to be able to have text with white color transitioning to sky 400 in each letter, and the letters having black borders. I am using tailwind and next 14. How can I achieve this? I know this is more of a tailwind question, but since I'm using next js aswell, it could simplify this code
The transition is imtiating this logo (attached)
The transition is imtiating this logo (attached)
Answered by B33fb0n3
Then you can do it like this:
<h1 className={`text-4xl font-bold ${className}`} aria-label={text}>
{text?.split('').map((char, index) => (
<span
key={index}
className="inline-block bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent"
style={{
WebkitTextStroke: '1px black',
textStroke: '1px black',
WebkitTextFillColor: 'transparent',
textFillColor: 'transparent',
}}
>
{char}
</span>
)) || text}
</h1>9 Replies
BasenseOP
apparently I cant attach .webp images. RIP
@B33fb0n3 like a gradient effect like this?
BasenseOP
yes, actually
That looks pretty much like I want it to
Then you can do it like this:
<h1 className={`text-4xl font-bold ${className}`} aria-label={text}>
{text?.split('').map((char, index) => (
<span
key={index}
className="inline-block bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent"
style={{
WebkitTextStroke: '1px black',
textStroke: '1px black',
WebkitTextFillColor: 'transparent',
textFillColor: 'transparent',
}}
>
{char}
</span>
)) || text}
</h1>Answer
BasenseOP
thank you!
sure thing
BasenseOP
