1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografía typographyheadinggradient

Gradient Heading

Encabezado de texto con degradado fluido multicolor y compatibilidad visual amplia.

Gradient Heading

Uso

Copia y pega este código directamente en tu página de Astro:

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>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GradientHeading.astro:

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>

Información Rápida

Categoría
Tipografía
Nombre de archivo
GradientHeading.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
typographyheadinggradient