Gradient Headings

Svelte Component

Create gradient-colored heading styles.

Package

@skeletonlabs/skeleton

Doc

View Page Source

Dependencies

Tailwind Gradients

Usage

Skeleton

Design.

Build.

Deploy.

These presentational styles can be generated using standard Tailwind gradient utlity classes. Skeleton is not required for this.

Apply Inline

Apply these classes inline in your HTML template. The span tag is required.

html

<h1>
	<span class="bg-gradient-to-br from-primary-500 via-tertiary-500 to-secondary-500 bg-clip-text text-transparent box-decoration-clone">
		Skeleton
	</span>
</h1>

Using @apply

Create a new class using @apply in your app.postcss global stylesheet. Then apply the following styles.

css

.gradient-heading {
	@apply bg-clip-text text-transparent box-decoration-clone;
	/* Direction */
	@apply bg-gradient-to-br;
	/* Color Stops */
	@apply from-primary-500 via-tertiary-500 to-secondary-500;
}

Implement this class anywhere you wish for the header to be applied. The span tag is required.