Skip to content

javierbyte/react-textgradient

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

React Text Gradient.

UNMAINTAINED

Unmantained for now.

It seems that there are modern ways to do this, see https://css-tricks.com/snippets/css/gradient-text/


A React component that creates text gradients with CSS, including a SVG fallback.

Live demo.

react-textgradient

Features.

  • Uses CSS gradients when possible (Chrome, Safari, iOS, Android).
  • Uses SVG as fallback on Firefox.
  • The text remains as fluid text (never replaced with svg).
  • Font size, family, weight, etc... controlled by CSS as normal.

Installation.

npm install react-textgradient --save

Usage.

First, require the component

var TextGradient = require('react-textgradient');

And then use it like this:

<TextGradient
  text='React Text Gradient'
  fromColor='#FFFF00'
  toColor='#FF8008'
  direction='right' />

And you will get the example of the start of the page.

Props.

  • text: The content.
  • fromColor: The initial color for the gradient. Can be any valid color for CSS and SVG (HEX, RGBA, RGB, etc...).
  • toColor The final color of the gradient.
  • fallbackColor: The color to display on unsupported browsers. Optional, defaults to toColor.
  • direction: One from 'top', 'left', 'bottom', 'right'. Optional, defaults to 'right'.

Roadmap.

  • Support for radial gradients.
  • Arbitrary gradient direction.

About

Text gradients with CSS with SVG fallback. [unmaintained]

Topics

Resources

Stars

Watchers

Forks