Gradient Headings

Svelte Component

Generate a gradient-colored heading with customizable tag and gradient direction.

Import

Package

Source

Doc

This component is slated to be removed. We recommend using the following Tailwind styles if you wish to replicate this.

html

<h1><span class="gradient-heading">Skeleton</span></h1>

css

.gradient-heading {
	@apply bg-gradient-to-r from-primary-500 to-bg-secondary-500 bg-clip text-transparent box-decoration-clone
}

See the Tailwind documentation for additional gradient options.

Skeleton

Text Tag

Direction From To

You are advised to use semantic heading tags (H1-H6). However, an explicit ARIA attribute of role="heading" has been applied.

html

<GradientHeading tag="h1" direction="bg-gradient-to-r" from="from-primary-500" to="to-secondary-500">Skeleton</GradientHeading>