Gradient Tiles

A stunning animated gradient background with fluted glass SVG filter effect. Perfect for hero sections.

Your Content Here

Install using CLI

npx shadcn@latest add "https://vengeance-ui.vercel.app/r/gradient-tiles.json"

Install Manually

Install dependencies

npm install clsx tailwind-merge

Add util file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Add styles to global CSS

Add the following CSS to your app/globals.css

.gradient-tiles-bg {
background: 
  repeating-linear-gradient(100deg, var(--stripe-color) 0% 7%, transparent 10% 12%, var(--stripe-color) 16%),
  repeating-linear-gradient(100deg, #60a5fa 10%, #e879f9 15%, #60a5fa 20%, #5eead4 25%, #60a5fa 30%);
background-size: 300% 200%;
filter: url(#fluted) blur(10px) invert(1);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
animation: aurora-bg 15s ease infinite;
}

.dark .gradient-tiles-bg {
filter: url(#fluted) blur(10px) opacity(0.5) saturate(2);
}

@keyframes aurora-bg {
0% { background-position: 0% 50%, 0% 50%; }
50% { background-position: 100% 50%, 100% 50%; }
100% { background-position: 0% 50%, 0% 50%; }
}

Copy the source code

Copy the code below and paste it into components/ui/gradient-tiles.tsx

"use client";

import { cn } from "@/lib/utils";

interface GradientTilesProps {
  children?: React.ReactNode;
  className?: string;
}

export function GradientTiles({ children, className }: GradientTilesProps) {
  return (
      <section className={cn("relative w-full min-h-screen overflow-hidden", className)}>
          <div className="gradient-tiles-bg absolute inset-0" />
          {children && (
              <div className="absolute inset-0 flex flex-col items-center justify-center gap-8 text-center p-4 mix-blend-difference [filter:invert(1)]">
                  {children}
              </div>
          )}
          <svg className="sr-only">
              <filter id="fluted" primitiveUnits="objectBoundingBox">
                  <feImage x="0" y="0" result="img" preserveAspectRatio="none meet" width=".03" height="1"
                      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><rect fill='black' width='1' height='1'/><rect fill='url(%23r)' width='1' height='1' style='mix-blend-mode:screen'/><rect fill='url(%23g)' width='1' height='1' style='mix-blend-mode:screen'/><rect fill='url(%23y)' width='1' height='1' style='mix-blend-mode:screen'/><defs><radialGradient id='y' cx='0' cy='0' r='1'><stop stop-color='yellow'/><stop offset='1' stop-opacity='0'/></radialGradient><radialGradient id='g' cx='1' cy='0' r='1'><stop stop-color='green'/><stop offset='1' stop-opacity='0'/></radialGradient><radialGradient id='r' cx='0' cy='1' r='1'><stop stop-color='red'/><stop offset='1' stop-opacity='0'/></radialGradient></defs></svg>" />
                  <feTile in="img" result="t" />
                  <feGaussianBlur stdDeviation=".0001" in="t" result="b" />
                  <feDisplacementMap scale=".08" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="b" />
              </filter>
          </svg>
      </section>
  );
}

export default GradientTiles;

Usage

1import { GradientTiles } from "@/components/ui/gradient-tiles"
2
3export function HeroSection() {
4return (
5  <GradientTiles>
6    <h1 className="text-6xl font-black">Welcome</h1>
7    <p className="text-xl mt-4">Your awesome tagline here</p>
8  </GradientTiles>
9);
10}

Props

Prop Name	Type	Default	Description
children	`React.ReactNode`	`-`	Content to display over the gradient background.
className	`string`	`""`	Additional CSS classes for the wrapper.

Features

Aurora Gradient: Mesmerizing animated rainbow gradient background

Fluted Glass Effect: SVG filter for unique visual texture

Dark Mode Support: Automatically adapts to light/dark themes

Minimal Code: Only 30 lines of component code

Fully Reusable: Pass any children to overlay on the gradient

Glow Border Card 3D Displacement Text