Typography typographyheadinggradient

Gradient Heading

A punchy hero heading with a customizable multi-color gradient text effect.

Gradient Heading

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GradientHeading } from 'astro-component-kit';
---

<GradientHeading level={2} from="#6366f1" to="#c084fc">Content</GradientHeading>
--- import { GradientHeading } from 'astro-component-kit'; --- <GradientHeading level={2} from="#6366f1" to="#c084fc">Content</GradientHeading>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GradientHeading.astro and paste the following code:

astro 
---
interface Props { level?: 1 | 2 | 3 | 4 | 5 | 6; from?: string; to?: string; }
const { level = 1, from = '#6366f1', to = '#c084fc' } = Astro.props;
const Tag = `h${level}` as any;
---
<Tag class="grad-txt" style={`--from: ${from}; --to: ${to}`}><slot /></Tag>
<style>
  .grad-txt { display: inline-block; font-weight: 900; background: linear-gradient(135deg, var(--from), var(--to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin: 0; }
</style>
--- interface Props { level?: 1 | 2 | 3 | 4 | 5 | 6; from?: string; to?: string; } const { level = 1, from = '#6366f1', to = '#c084fc' } = Astro.props; const Tag = `h${level}` as any; --- <Tag class="grad-txt" style={`--from: ${from}; --to: ${to}`}><slot /></Tag> <style> .grad-txt { display: inline-block; font-weight: 900; background: linear-gradient(135deg, var(--from), var(--to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin: 0; } </style>

Quick Info

Category
Typography
Filename
GradientHeading.astro
Dependencies
None — pure Astro + CSS
Tags
typographyheadinggradient