GradientText

A text component that displays text with gradient colors. Supports customizable gradients with multiple colors, different angles, and animated transitions (web only).

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽⁸⁾

Playground

Basic

Pass two or more colors to fill text with a gradient. All other Text props still apply.

Loading demo…

import
 
{
 
GradientText
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<GradientText
 
colors
=
{
[
'#FF0080'
,
 
'#7928CA'
]
}
>
      
Hello
 
World
    
</GradientText
>
  
)
;
}

Angles

Different gradient directions using the angle prop.

Loading demo…

import
 
{
 
Block
,
 
GradientText
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 angles 
=
 
[
0
,
 
45
,
 
90
,
 
135
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
gap
=
"md"
>
      
{
angles
.
map
(
(
angle
)
 
=>
 
(
        
<GradientText
 
key
=
{
angle
}
 
colors
=
{
[
'#FF0080'
,
 
'#7928CA'
]
}
 
angle
=
{
angle
}
 
size
=
"lg"
>
          
{
angle
}
° gradient
        
</GradientText
>
      
)
)
}
    
</Block
>
  
)
;
}

Controlled

Control the gradient position manually using the position prop (0.0 to 1.0).

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
GradientText
,
 
Slider
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
position
,
 setPosition
]
 
=
 
useState
(
0
)
;
 
  
return
 
(
    
<Block
>
      
<GradientText
        
value
=
"Controlled Gradient"
        
position
=
{
position
}
        
colors
=
{
[
'#ff76ba'
,
 
'#FF0080'
,
 
'#7928CA'
,
 
'#4F46E5'
]
}
        
size
=
"3xl"
      
/>
      
<Slider
        
value
=
{
position
}
        
onChange
=
{
setPosition
}
        
min
=
{
0
}
        
max
=
{
1
}
        
step
=
{
0.01
}
      
/>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap