Components

Gradient Text

Text painted with a gradient fill, with optional animated shimmer and colour presets.

php artisan blatui:add gradient-text

Build delightful interfaces

<h1 class="text-4xl font-bold tracking-tight">
    <x-ui.gradient-text>Build delightful interfaces</x-ui.gradient-text>
</h1>

Animated

Shimmering by default

<h1 class="text-4xl font-bold tracking-tight">
    <x-ui.gradient-text :animate="true" from="#06b6d4" via="#8b5cf6" to="#ec4899">
        Shimmering by default
    </x-ui.gradient-text>
</h1>

Inline

Ship faster with BlatUI — a set of accessible, copy-paste components for your next Laravel app.

<p class="max-w-md text-lg leading-7">
    Ship faster with <x-ui.gradient-text preset="aurora" class="font-semibold">BlatUI</x-ui.gradient-text>
    — a set of accessible, copy-paste components for your next
    <x-ui.gradient-text preset="sunset" class="font-semibold">Laravel</x-ui.gradient-text> app.
</p>

Preset

sunset

ocean

candy

<div class="space-y-2">
    @foreach (['sunset', 'ocean', 'candy'] as $preset)
        <h2 class="text-3xl font-bold tracking-tight">
            <x-ui.gradient-text :preset="$preset" class="capitalize">{{ $preset }}</x-ui.gradient-text>
        </h2>
    @endforeach
</div>

API Reference

Props, slots and exposed methods for <x-ui.gradient-text>.

Props

Prop	Type	Default	Description
`preset`	`string`	—	A named gradient palette. Defaults to "brand" when no preset and no explicit from/to are given. Explicit from/to override the preset. `brand` `sunset` `ocean` `candy` `gold` `aurora` `flamingo` `mint`
`from`	`string`	—	The starting gradient color stop (any CSS color). Setting this (or to) switches to a custom gradient and ignores the preset.
`via`	`string`	—	An optional middle gradient color stop. Overrides the preset's middle stop when set; omitted entirely when empty.
`to`	`string`	—	The ending gradient color stop (any CSS color). Falls back to the from color when only from is given.
`animate`	`bool`	`false`	Animates a looping shimmer by sliding the background position. Automatically disabled under prefers-reduced-motion.
`as`	`string`	`'span'`	The HTML tag to render. Defaults to span so it composes inside headings and other text; pass a block tag like "h1" when used standalone.

Slots

Slot	Description
`default`	The text to paint with the gradient. It stays real, selectable DOM text; only the fill is decorative.