Svelte Component

Gradient Headings

Create gradient-colored heading styles.

Page Source Tailwind Gradients

Demo

Design.

Build.

Deploy.

Can be generated using standard Tailwind's gradient color stops. Skeleton is not required.

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;
}
html 
<h1><span class="gradient-heading">Skeleton</span></h1>