svelte-gradient-typography

Gradient typography for Svelte inspired by Apple's HomePod Mini landing page

Get started

Installation

npm install svelte-gradient-typography

Usage

First you need to import it on the script section

// ...
    import GradientText from 'svelte-gradient-typography';
// ...

then, for basic use (with default style) apply:

    <GradientText>Lorem Ipsum</GradientText>

Customization

To change the font size, add size property as follow

    <GradientText size="100px">
      Lorem Ipsum in Pixel
    </GradientText>

To change the default gradient:

    <GradientText 
      gradient="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);">
      Lorem Ipsum Blue Gradient
    </GradientText>

And if you want to customize even further, just add CSS style:

    <GradientText 
      style="font-weight:500;line-height:1.2;text-align:center">
      Lorem Ipsum with Custom CSS
    </GradientText>