LogoReactUI Library
HomeComponentsShowcaseThemesNServicesNNextGenNPricingContact

Resources

GalleryUI screenshots & inspirationBlogArticles & tutorialsDocumentationGuides & API referenceAboutCompany, mission & teamExamplesReal-world code examples
  1. Home
  2. /Showcase
  3. /Gradients
R
ReactUI

A comprehensive React component library with beautiful design, accessibility, and developer experience in mind.

Product

  • Components
  • Documentation
  • Examples
  • Buttons
  • Cards

Resources

  • Getting Started
  • Installation
  • Theming
  • API Reference
  • Free PDF & Image Tools

Community

  • About Us
  • GitHub
  • Discord
  • Twitter

© 2026 ReactUI Library. All rights reserved.

Privacy PolicyTerms of ServiceRefund Policy
Showcase
UI Library

Gradient Paradise

Mesh · Aurora · Colour

25
Total
25
Visible

Filter by type

✦ Unlock All Pro

Gradient Paradise

Mesh gradients, aurora effects, animated colour transitions, and vibrant backgrounds.

25
components

Gradient Buttons

Six vibrant gradient buttons with hover scale and colored drop shadows.

T
gradient-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap gap-3">
2 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition-all duration-200 hover:scale-105 hover:shadow-violet-500/50">
3 Violet → Indigo
4 </button>
5 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-pink-500/30 transition-all duration-200 hover:scale-105 hover:shadow-pink-500/50">
6 Pink → Rose
7 </button>
8 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-cyan-500/30 transition-all duration-200 hover:scale-105 hover:shadow-cyan-500/50">
9 Cyan → Blue
10 </button>
11 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/30 transition-all duration-200 hover:scale-105 hover:shadow-emerald-500/50">
12 Emerald → Teal
13 </button>
14 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-amber-500/30 transition-all duration-200 hover:scale-105 hover:shadow-amber-500/50">
15 Amber → Orange
16 </button>
17 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-red-500 to-pink-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-red-500/30 transition-all duration-200 hover:scale-105 hover:shadow-red-500/50">
18 Red → Pink
19 </button>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Gradient Border Buttons

Transparent background buttons with vivid gradient borders using the p-[2px] wrapper trick.

T
gradient-border-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap gap-4">
2 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 p-[2px]">
3 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
4 Violet / Fuchsia
5 </button>
6 </div>
7 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 p-[2px]">
8 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
9 Cyan / Blue
10 </button>
11 </div>
12 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-emerald-400 to-teal-500 p-[2px]">
13 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
14 Emerald / Teal
15 </button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Gradient Pill Buttons

Rounded-full pill buttons with icon+text combos in multiple sizes and gradient combos.

T
gradient-pill-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap items-center gap-3">
2 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105">
3 <span>✦</span> Get Started
4 </button>
5 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/25 transition hover:scale-105">
6 <span>→</span> Explore
7 </button>
8 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 px-7 py-3 text-base font-bold text-white shadow-xl shadow-amber-500/30 transition hover:scale-105">
9 <span>★</span> Premium
10 </button>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Shimmer Buttons

Gradient buttons with a light-sweep shimmer animation triggered on hover.

T
shimmer-buttons.tsx
1<button "color:#79c0ff">className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105
2 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
3 Hover to Shimmer
4</button>
5<button "color:#79c0ff">className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-cyan-500/30 transition hover:scale-105
6 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
7 Cyber Shimmer
8</button>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Cards

Aurora

Breathtaking violet and fuchsia blend.

Explore →

Ocean

Deep cyan and blue oceanic tones.

Explore →

Sunrise

Warm amber and orange sunrise hues.

Explore →

Cards with full gradient header areas, content, and CTA links in three color combos.

T
gradient-cards.tsx
1<div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900">
2 <div "color:#79c0ff">className="h-24 bg-gradient-to-br from-violet-500 via-fuchsia-500 to-pink-500" />
3 <div "color:#79c0ff">className="p-4">
4 <h3 "color:#79c0ff">className="font-bold text-white">Aurora</h3>
5 <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Breathtaking violet and fuchsia blend.</p>
6 <a "color:#79c0ff">className="mt-3 inline-block text-xs font-semibold text-violet-400 hover:text-violet-300">Explore →</a>
7 </div>
8</div>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Stat Cards

📈

24.5K

Total Users

+12% this month

💰

$8,490

Revenue

+8.3% this month

🛒

1,284

Orders

+5.1% this month

⭐

98.2%

Satisfaction

+2% this month

KPI cards with gradient icon boxes, metric values, labels, and trend indicators.

T
gradient-stat-cards.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-4">
2 <div "color:#79c0ff">className="mb-3 inline-flex rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 p-2 shadow-lg shadow-violet-500/30">
3 <span "color:#79c0ff">className="text-lg">📈</span>
4 </div>
5 <p "color:#79c0ff">className="text-xl font-extrabold text-white">24.5K</p>
6 <p "color:#79c0ff">className="text-xs text-slate-400">Total Users</p>
7 <p "color:#79c0ff">className="mt-1 text-xs font-semibold text-emerald-400">+12% this month</p>
8</div>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Pricing

Starter

$9/mo

  • ✓ 5 Projects
  • ✓ 10 GB Storage
  • ✗ Custom Domain
POPULAR

Pro

$29/mo

  • ✓ Unlimited Projects
  • ✓ 100 GB Storage
  • ✓ Custom Domain

Enterprise

$99/mo

  • ✓ Unlimited Projects
  • ✓ 1 TB Storage
  • ✓ Priority Support

Three-tier pricing with a featured card using full gradient background and a 'Popular' badge.

T
gradient-pricing.tsx
1<div "color:#79c0ff">className="relative rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 p-5 shadow-2xl shadow-violet-500/40">
2 <span "color:#79c0ff">className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-white px-3 py-0.5 text-[10px] font-bold text-violet-700 shadow">POPULAR</span>
3 <p "color:#79c0ff">className="text-sm font-semibold text-violet-200">Pro</p>
4 <p "color:#79c0ff">className="mt-2 text-3xl font-extrabold text-white">$29<span "color:#79c0ff">className="text-base font-normal text-violet-200">/mo</span></p>
5 <div "color:#79c0ff">className="my-4 h-px bg-white/20" />
6 <ul "color:#79c0ff">className="space-y-2 text-xs text-violet-100">
7 <li>✓ Unlimited Projects</li>
8 <li>✓ 100 GB Storage</li>
9 <li>✓ Custom Domain</li>
10 </ul>
11 <button "color:#79c0ff">className="mt-5 w-full rounded-xl bg-white py-2 text-sm font-bold text-violet-700 transition hover:bg-violet-50">
12 Upgrade Now
13 </button>
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Gradient Profile

👩‍💻

Aria Chen

Senior UI Engineer · San Francisco

248

Projects

12.4K

Followers

943

Following

Profile card with gradient header banner, gradient-bordered avatar, stats row, and follow button.

T
gradient-profile.tsx
1<div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900">
2 <div "color:#79c0ff">className="h-24 bg-gradient-to-r from-violet-500 via-fuchsia-500 to-pink-500" />
3 <div "color:#79c0ff">className="px-5 pb-5">
4 <div "color:#79c0ff">className="-mt-10 mb-3 flex items-end justify-between">
5 <div "color:#79c0ff">className="rounded-full bg-gradient-to-br from-violet-400 to-fuchsia-500 p-[3px] shadow-lg shadow-violet-500/40">
6 <div "color:#79c0ff">className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-2xl">👩‍💻</div>
7 </div>
8 <button "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-4 py-1.5 text-xs font-bold text-white shadow transition hover:scale-105">
9 Follow
10 </button>
11 </div>
12 <h3 "color:#79c0ff">className="font-bold text-white">Aria Chen</h3>
13 <p "color:#79c0ff">className="text-xs text-slate-400">Senior UI Engineer · San Francisco</p>
14 </div>
15</div>
⬡ UIDrop Component15 lines
TypeScript ReactUTF-8

Gradient Text

Violet to Fuchsia

Cyan to Blue

Emerald to Teal

Rose to Orange

Rainbow Spectrum

Headings using bg-gradient-to-r + bg-clip-text text-transparent in five stunning color combos.

T
gradient-text.tsx
1<h2 "color:#79c0ff">className="bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-3xl font-extrabold text-transparent">
2 Violet to Fuchsia
3</h2>
4<h2 "color:#79c0ff">className="bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-3xl font-extrabold text-transparent">
5 Cyan to Blue
6</h2>
7<h2 "color:#79c0ff">className="bg-gradient-to-r from-emerald-400 to-teal-400 bg-clip-text text-3xl font-extrabold text-transparent">
8 Emerald to Teal
9</h2>
10<h2 "color:#79c0ff">className="bg-gradient-to-r from-rose-400 to-orange-400 bg-clip-text text-3xl font-extrabold text-transparent">
11 Rose to Orange
12</h2>
13<h2 "color:#79c0ff">className="bg-gradient-to-r from-red-400 via-yellow-400 via-green-400 via-blue-400 to-violet-400 bg-clip-text text-3xl font-extrabold text-transparent">
14 Rainbow Spectrum
15</h2>
⬡ UIDrop Component15 lines
TypeScript ReactUTF-8

Gradient Hero Text

Build Beautiful
Interfaces

Craft stunning UIs with hand-crafted gradient components that look great in any project.

Large hero heading with massive gradient, subtitle copy, and two CTA buttons.

T
gradient-hero-text.tsx
1<div "color:#79c0ff">className="text-center">
2 <h1 "color:#79c0ff">className="bg-gradient-to-r from-violet-400 via-fuchsia-400 to-pink-400 bg-clip-text text-6xl font-extrabold leading-tight text-transparent">
3 Build Beautiful
4 <br />
5 Interfaces
6 </h1>
7 <p "color:#79c0ff">className="mx-auto mt-4 max-w-sm text-sm text-slate-400">
8 Craft stunning UIs with hand-crafted gradient components.
9 </p>
10 <div "color:#79c0ff">className="mt-6 flex justify-center gap-3">
11 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105">
12 Start Building
13 </button>
14 <button "color:#79c0ff">className="rounded-xl border border-slate-700 bg-slate-900 px-6 py-2.5 text-sm font-bold text-slate-300 transition hover:border-violet-500/50">
15 View Docs
16 </button>
17 </div>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Gradient Glass Cards

🔮

Violet Glass

Frosted violet tint overlay.

💎

Pink Glass

Dreamy fuchsia glass panel.

🌊

Cyan Glass

Cool ocean-tinted glass.

Glassmorphism cards with gradient tint backgrounds and backdrop-blur over a mesh gradient.

T
gradient-glass-cards.tsx
1{/* Place cards over a gradient background */}
2<div "color:#79c0ff">className="rounded-2xl border border-violet-500/20 bg-violet-500/10 p-4 backdrop-blur-md">
3 <div "color:#79c0ff">className="mb-2 text-2xl">🔮</div>
4 <p "color:#79c0ff">className="font-semibold text-white">Violet Glass</p>
5 <p "color:#79c0ff">className="mt-1 text-xs text-violet-200/70">Frosted violet tint overlay.</p>
6</div>
7<div "color:#79c0ff">className="rounded-2xl border border-cyan-500/20 bg-cyan-500/10 p-4 backdrop-blur-md">
8 <div "color:#79c0ff">className="mb-2 text-2xl">🌊</div>
9 <p "color:#79c0ff">className="font-semibold text-white">Cyan Glass</p>
10 <p "color:#79c0ff">className="mt-1 text-xs text-cyan-200/70">Cool ocean-tinted glass.</p>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Gradient Border Cards

🌌

Galaxy

Violet to fuchsia border flow.

🌊

Ocean

Cyan to blue border wave.

🌅

Sunrise

Amber to rose border glow.

Cards using the p-[2px] gradient wrapper trick to achieve vivid gradient borders.

T
gradient-border-cards.tsx
1<div "color:#79c0ff">className="rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-500 p-[2px] shadow-lg shadow-violet-500/30">
2 <div "color:#79c0ff">className="h-full rounded-[14px] bg-slate-950 p-5">
3 <div "color:#79c0ff">className="mb-2 text-xl">🌌</div>
4 <h3 "color:#79c0ff">className="font-bold text-white">Galaxy</h3>
5 <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Violet to fuchsia border flow.</p>
6 </div>
7</div>
⬡ UIDrop Component7 lines
TypeScript ReactUTF-8

Gradient Border Inputs

Form inputs wrapped in gradient border containers with focus glow states.

T
gradient-border-inputs.tsx
1<div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 p-[2px] focus-within:shadow-lg focus-within:shadow-violet-500/30">
2 <input
3 "color:#79c0ff">type="email"
4 "color:#79c0ff">placeholder="you@example.com"
5 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none"
6 />
7</div>
8<div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500 p-[2px] focus-within:shadow-lg focus-within:shadow-cyan-500/30">
9 <input
10 "color:#79c0ff">type="text"
11 "color:#79c0ff">placeholder="@username"
12 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none"
13 />
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Gradient Login

Welcome Back

Sign in to continue to your account.

No account? Sign up free

Clean login form with gradient heading, gradient-bordered inputs, and shimmer submit button.

T
gradient-login.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6">
2 <h2 "color:#79c0ff">className="mb-1 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-xl font-extrabold text-transparent">
3 Welcome Back
4 </h2>
5 <p "color:#79c0ff">className="mb-5 text-xs text-slate-500">Sign in to continue to your account.</p>
6 <div "color:#79c0ff">className="space-y-3">
7 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/60 to-fuchsia-500/60 p-[1.5px]">
8 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@example.com"
9 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-3 py-2 text-sm text-white placeholder-slate-600 outline-none" />
10 </div>
11 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/60 to-fuchsia-500/60 p-[1.5px]">
12 <input "color:#79c0ff">type="password" "color:#79c0ff">placeholder="••••••••"
13 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-3 py-2 text-sm text-white placeholder-slate-600 outline-none" />
14 </div>
15 <button "color:#79c0ff">className="group relative mt-2 w-full overflow-hidden rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-[1.02]
16 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
17 Sign In
18 </button>
19 </div>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Gradient Subscribe

Join 50K+ developers

Stay in the loop

Get the latest components, tutorials and tips.

No spam. Unsubscribe at any time.

Email subscribe card with gradient badge, gradient heading, and shimmer CTA button.

T
gradient-subscribe.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6 text-center">
2 <span "color:#79c0ff">className="inline-block rounded-full bg-gradient-to-r from-violet-500/20 to-fuchsia-500/20 px-4 py-1 text-xs font-bold text-violet-400 ring-1 ring-violet-500/30">
3 Join 50K+ developers
4 </span>
5 <h2 "color:#79c0ff">className="mt-3 bg-gradient-to-r from-violet-400 via-fuchsia-400 to-pink-400 bg-clip-text text-2xl font-extrabold text-transparent">
6 Stay in the loop
7 </h2>
8 <div "color:#79c0ff">className="mt-5 space-y-3">
9 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/40 to-fuchsia-500/40 p-[1.5px]">
10 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Enter your email..."
11 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none" />
12 </div>
13 <button "color:#79c0ff">className="w-full rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-[1.02]">
14 Subscribe Free
15 </button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Gradient Badges & Tags

Rainbow Gradient

Rainbow Badge

Individual Gradient Badges

ProNewBetaHotSale

Gradient Pill Chips

ReactTypeScriptTailwindNext.jsFramer

Rainbow gradient badges, individual gradient badges, and gradient pill chip tags.

T
gradient-badges-&-tags.tsx
1{/* Rainbow badge */}
2<span "color:#79c0ff">className="inline-block rounded-full px-4 py-1 text-sm font-bold text-white shadow-lg"
3 "color:#79c0ff">style={{ background: "linear-gradient(90deg, #f43f5e, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6)" }}>
4 Rainbow Badge
5</span>
6 
7{/* Solid gradient badges */}
8<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-3 py-1 text-xs font-semibold text-white">Pro</span>
9<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 px-3 py-1 text-xs font-semibold text-white">New</span>
10 
11{/* Tinted pill chips */}
12<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500/20 to-fuchsia-500/20 px-3 py-1 text-xs font-semibold text-violet-400 ring-1 ring-violet-500/30">React</span>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Gradient Progress Bars

Design92%
Development78%
Marketing65%
Analytics84%
Support55%

Five progress bars each with a unique gradient fill, rounded track, and percentage label.

T
gradient-progress-bars.tsx
1<div>
2 <div "color:#79c0ff">className="mb-1.5 flex justify-between text-xs">
3 <span "color:#79c0ff">className="font-semibold text-slate-300">Design</span>
4 <span "color:#79c0ff">className="font-bold text-slate-400">92%</span>
5 </div>
6 <div "color:#79c0ff">className="h-3 w-full overflow-hidden rounded-full bg-slate-800">
7 <div "color:#79c0ff">className="h-full w-[92%] rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 shadow-md shadow-violet-500/50 transition-all duration-1000" />
8 </div>
9</div>
10<div>
11 <div "color:#79c0ff">className="mb-1.5 flex justify-between text-xs">
12 <span "color:#79c0ff">className="font-semibold text-slate-300">Development</span>
13 <span "color:#79c0ff">className="font-bold text-slate-400">78%</span>
14 </div>
15 <div "color:#79c0ff">className="h-3 w-full overflow-hidden rounded-full bg-slate-800">
16 <div "color:#79c0ff">className="h-full w-[78%] rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 shadow-md shadow-cyan-500/50 transition-all duration-1000" />
17 </div>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Aurora Background

Aurora

Layered radial gradients produce a mesmerizing aurora-borealis effect with shifting color blobs.

T
aurora-background.tsx
1<div "color:#79c0ff">className="relative h-48 w-full overflow-hidden rounded-2xl bg-slate-950">
2 <div "color:#79c0ff">className="absolute -top-10 left-1/4 h-48 w-48 animate-[float_6s_ease-in-out_infinite] rounded-full bg-violet-600/40 blur-3xl" />
3 <div "color:#79c0ff">className="absolute top-0 right-1/4 h-40 w-40 animate-[float_8s_ease-in-out_infinite_2s] rounded-full bg-cyan-500/40 blur-3xl" />
4 <div "color:#79c0ff">className="absolute bottom-0 left-1/3 h-36 w-36 animate-[float_7s_ease-in-out_infinite_1s] rounded-full bg-emerald-500/30 blur-3xl" />
5 <div "color:#79c0ff">className="absolute top-1/2 right-1/3 h-32 w-32 animate-[float_9s_ease-in-out_infinite_3s] rounded-full bg-pink-500/30 blur-3xl" />
6 <div "color:#79c0ff">className="relative flex h-full items-center justify-center">
7 <p "color:#79c0ff">className="text-2xl font-extrabold text-white/90 drop-shadow-xl">Aurora</p>
8 </div>
9</div>
⬡ UIDrop Component9 lines
TypeScript ReactUTF-8

Gradient Paradise

25 components

Gradient Paradise

Mesh gradients, aurora effects, animated colour transitions, and vibrant backgrounds.

Gradient Buttons

Six vibrant gradient buttons with hover scale and colored drop shadows.

T
gradient-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap gap-3">
2 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition-all duration-200 hover:scale-105 hover:shadow-violet-500/50">
3 Violet → Indigo
4 </button>
5 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-pink-500/30 transition-all duration-200 hover:scale-105 hover:shadow-pink-500/50">
6 Pink → Rose
7 </button>
8 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-cyan-500/30 transition-all duration-200 hover:scale-105 hover:shadow-cyan-500/50">
9 Cyan → Blue
10 </button>
11 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/30 transition-all duration-200 hover:scale-105 hover:shadow-emerald-500/50">
12 Emerald → Teal
13 </button>
14 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-amber-500/30 transition-all duration-200 hover:scale-105 hover:shadow-amber-500/50">
15 Amber → Orange
16 </button>
17 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-red-500 to-pink-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-red-500/30 transition-all duration-200 hover:scale-105 hover:shadow-red-500/50">
18 Red → Pink
19 </button>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Gradient Border Buttons

Transparent background buttons with vivid gradient borders using the p-[2px] wrapper trick.

T
gradient-border-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap gap-4">
2 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 p-[2px]">
3 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
4 Violet / Fuchsia
5 </button>
6 </div>
7 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 p-[2px]">
8 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
9 Cyan / Blue
10 </button>
11 </div>
12 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-emerald-400 to-teal-500 p-[2px]">
13 <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-900">
14 Emerald / Teal
15 </button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Gradient Pill Buttons

Rounded-full pill buttons with icon+text combos in multiple sizes and gradient combos.

T
gradient-pill-buttons.tsx
1<div "color:#79c0ff">className="flex flex-wrap items-center gap-3">
2 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105">
3 <span>✦</span> Get Started
4 </button>
5 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/25 transition hover:scale-105">
6 <span>→</span> Explore
7 </button>
8 <button "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 px-7 py-3 text-base font-bold text-white shadow-xl shadow-amber-500/30 transition hover:scale-105">
9 <span>★</span> Premium
10 </button>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Shimmer Buttons

Gradient buttons with a light-sweep shimmer animation triggered on hover.

T
shimmer-buttons.tsx
1<button "color:#79c0ff">className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105
2 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
3 Hover to Shimmer
4</button>
5<button "color:#79c0ff">className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-cyan-500/30 transition hover:scale-105
6 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
7 Cyber Shimmer
8</button>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Cards

Aurora

Breathtaking violet and fuchsia blend.

Explore →

Ocean

Deep cyan and blue oceanic tones.

Explore →

Sunrise

Warm amber and orange sunrise hues.

Explore →

Cards with full gradient header areas, content, and CTA links in three color combos.

T
gradient-cards.tsx
1<div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900">
2 <div "color:#79c0ff">className="h-24 bg-gradient-to-br from-violet-500 via-fuchsia-500 to-pink-500" />
3 <div "color:#79c0ff">className="p-4">
4 <h3 "color:#79c0ff">className="font-bold text-white">Aurora</h3>
5 <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Breathtaking violet and fuchsia blend.</p>
6 <a "color:#79c0ff">className="mt-3 inline-block text-xs font-semibold text-violet-400 hover:text-violet-300">Explore →</a>
7 </div>
8</div>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Stat Cards

📈

24.5K

Total Users

+12% this month

💰

$8,490

Revenue

+8.3% this month

🛒

1,284

Orders

+5.1% this month

⭐

98.2%

Satisfaction

+2% this month

KPI cards with gradient icon boxes, metric values, labels, and trend indicators.

T
gradient-stat-cards.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-4">
2 <div "color:#79c0ff">className="mb-3 inline-flex rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 p-2 shadow-lg shadow-violet-500/30">
3 <span "color:#79c0ff">className="text-lg">📈</span>
4 </div>
5 <p "color:#79c0ff">className="text-xl font-extrabold text-white">24.5K</p>
6 <p "color:#79c0ff">className="text-xs text-slate-400">Total Users</p>
7 <p "color:#79c0ff">className="mt-1 text-xs font-semibold text-emerald-400">+12% this month</p>
8</div>
⬡ UIDrop Component8 lines
TypeScript ReactUTF-8

Gradient Pricing

Starter

$9/mo

  • ✓ 5 Projects
  • ✓ 10 GB Storage
  • ✗ Custom Domain
POPULAR

Pro

$29/mo

  • ✓ Unlimited Projects
  • ✓ 100 GB Storage
  • ✓ Custom Domain

Enterprise

$99/mo

  • ✓ Unlimited Projects
  • ✓ 1 TB Storage
  • ✓ Priority Support

Three-tier pricing with a featured card using full gradient background and a 'Popular' badge.

T
gradient-pricing.tsx
1<div "color:#79c0ff">className="relative rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 p-5 shadow-2xl shadow-violet-500/40">
2 <span "color:#79c0ff">className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-white px-3 py-0.5 text-[10px] font-bold text-violet-700 shadow">POPULAR</span>
3 <p "color:#79c0ff">className="text-sm font-semibold text-violet-200">Pro</p>
4 <p "color:#79c0ff">className="mt-2 text-3xl font-extrabold text-white">$29<span "color:#79c0ff">className="text-base font-normal text-violet-200">/mo</span></p>
5 <div "color:#79c0ff">className="my-4 h-px bg-white/20" />
6 <ul "color:#79c0ff">className="space-y-2 text-xs text-violet-100">
7 <li>✓ Unlimited Projects</li>
8 <li>✓ 100 GB Storage</li>
9 <li>✓ Custom Domain</li>
10 </ul>
11 <button "color:#79c0ff">className="mt-5 w-full rounded-xl bg-white py-2 text-sm font-bold text-violet-700 transition hover:bg-violet-50">
12 Upgrade Now
13 </button>
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Gradient Profile

👩‍💻

Aria Chen

Senior UI Engineer · San Francisco

248

Projects

12.4K

Followers

943

Following

Profile card with gradient header banner, gradient-bordered avatar, stats row, and follow button.

T
gradient-profile.tsx
1<div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900">
2 <div "color:#79c0ff">className="h-24 bg-gradient-to-r from-violet-500 via-fuchsia-500 to-pink-500" />
3 <div "color:#79c0ff">className="px-5 pb-5">
4 <div "color:#79c0ff">className="-mt-10 mb-3 flex items-end justify-between">
5 <div "color:#79c0ff">className="rounded-full bg-gradient-to-br from-violet-400 to-fuchsia-500 p-[3px] shadow-lg shadow-violet-500/40">
6 <div "color:#79c0ff">className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-2xl">👩‍💻</div>
7 </div>
8 <button "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-4 py-1.5 text-xs font-bold text-white shadow transition hover:scale-105">
9 Follow
10 </button>
11 </div>
12 <h3 "color:#79c0ff">className="font-bold text-white">Aria Chen</h3>
13 <p "color:#79c0ff">className="text-xs text-slate-400">Senior UI Engineer · San Francisco</p>
14 </div>
15</div>
⬡ UIDrop Component15 lines
TypeScript ReactUTF-8

Gradient Text

Violet to Fuchsia

Cyan to Blue

Emerald to Teal

Rose to Orange

Rainbow Spectrum

Headings using bg-gradient-to-r + bg-clip-text text-transparent in five stunning color combos.

T
gradient-text.tsx
1<h2 "color:#79c0ff">className="bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-3xl font-extrabold text-transparent">
2 Violet to Fuchsia
3</h2>
4<h2 "color:#79c0ff">className="bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-3xl font-extrabold text-transparent">
5 Cyan to Blue
6</h2>
7<h2 "color:#79c0ff">className="bg-gradient-to-r from-emerald-400 to-teal-400 bg-clip-text text-3xl font-extrabold text-transparent">
8 Emerald to Teal
9</h2>
10<h2 "color:#79c0ff">className="bg-gradient-to-r from-rose-400 to-orange-400 bg-clip-text text-3xl font-extrabold text-transparent">
11 Rose to Orange
12</h2>
13<h2 "color:#79c0ff">className="bg-gradient-to-r from-red-400 via-yellow-400 via-green-400 via-blue-400 to-violet-400 bg-clip-text text-3xl font-extrabold text-transparent">
14 Rainbow Spectrum
15</h2>
⬡ UIDrop Component15 lines
TypeScript ReactUTF-8

Gradient Hero Text

Build Beautiful
Interfaces

Craft stunning UIs with hand-crafted gradient components that look great in any project.

Large hero heading with massive gradient, subtitle copy, and two CTA buttons.

T
gradient-hero-text.tsx
1<div "color:#79c0ff">className="text-center">
2 <h1 "color:#79c0ff">className="bg-gradient-to-r from-violet-400 via-fuchsia-400 to-pink-400 bg-clip-text text-6xl font-extrabold leading-tight text-transparent">
3 Build Beautiful
4 <br />
5 Interfaces
6 </h1>
7 <p "color:#79c0ff">className="mx-auto mt-4 max-w-sm text-sm text-slate-400">
8 Craft stunning UIs with hand-crafted gradient components.
9 </p>
10 <div "color:#79c0ff">className="mt-6 flex justify-center gap-3">
11 <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-105">
12 Start Building
13 </button>
14 <button "color:#79c0ff">className="rounded-xl border border-slate-700 bg-slate-900 px-6 py-2.5 text-sm font-bold text-slate-300 transition hover:border-violet-500/50">
15 View Docs
16 </button>
17 </div>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Gradient Glass Cards

🔮

Violet Glass

Frosted violet tint overlay.

💎

Pink Glass

Dreamy fuchsia glass panel.

🌊

Cyan Glass

Cool ocean-tinted glass.

Glassmorphism cards with gradient tint backgrounds and backdrop-blur over a mesh gradient.

T
gradient-glass-cards.tsx
1{/* Place cards over a gradient background */}
2<div "color:#79c0ff">className="rounded-2xl border border-violet-500/20 bg-violet-500/10 p-4 backdrop-blur-md">
3 <div "color:#79c0ff">className="mb-2 text-2xl">🔮</div>
4 <p "color:#79c0ff">className="font-semibold text-white">Violet Glass</p>
5 <p "color:#79c0ff">className="mt-1 text-xs text-violet-200/70">Frosted violet tint overlay.</p>
6</div>
7<div "color:#79c0ff">className="rounded-2xl border border-cyan-500/20 bg-cyan-500/10 p-4 backdrop-blur-md">
8 <div "color:#79c0ff">className="mb-2 text-2xl">🌊</div>
9 <p "color:#79c0ff">className="font-semibold text-white">Cyan Glass</p>
10 <p "color:#79c0ff">className="mt-1 text-xs text-cyan-200/70">Cool ocean-tinted glass.</p>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Gradient Border Cards

🌌

Galaxy

Violet to fuchsia border flow.

🌊

Ocean

Cyan to blue border wave.

🌅

Sunrise

Amber to rose border glow.

Cards using the p-[2px] gradient wrapper trick to achieve vivid gradient borders.

T
gradient-border-cards.tsx
1<div "color:#79c0ff">className="rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-500 p-[2px] shadow-lg shadow-violet-500/30">
2 <div "color:#79c0ff">className="h-full rounded-[14px] bg-slate-950 p-5">
3 <div "color:#79c0ff">className="mb-2 text-xl">🌌</div>
4 <h3 "color:#79c0ff">className="font-bold text-white">Galaxy</h3>
5 <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">Violet to fuchsia border flow.</p>
6 </div>
7</div>
⬡ UIDrop Component7 lines
TypeScript ReactUTF-8

Gradient Border Inputs

Form inputs wrapped in gradient border containers with focus glow states.

T
gradient-border-inputs.tsx
1<div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 p-[2px] focus-within:shadow-lg focus-within:shadow-violet-500/30">
2 <input
3 "color:#79c0ff">type="email"
4 "color:#79c0ff">placeholder="you@example.com"
5 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none"
6 />
7</div>
8<div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500 p-[2px] focus-within:shadow-lg focus-within:shadow-cyan-500/30">
9 <input
10 "color:#79c0ff">type="text"
11 "color:#79c0ff">placeholder="@username"
12 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none"
13 />
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Gradient Login

Welcome Back

Sign in to continue to your account.

No account? Sign up free

Clean login form with gradient heading, gradient-bordered inputs, and shimmer submit button.

T
gradient-login.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6">
2 <h2 "color:#79c0ff">className="mb-1 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-xl font-extrabold text-transparent">
3 Welcome Back
4 </h2>
5 <p "color:#79c0ff">className="mb-5 text-xs text-slate-500">Sign in to continue to your account.</p>
6 <div "color:#79c0ff">className="space-y-3">
7 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/60 to-fuchsia-500/60 p-[1.5px]">
8 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@example.com"
9 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-3 py-2 text-sm text-white placeholder-slate-600 outline-none" />
10 </div>
11 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/60 to-fuchsia-500/60 p-[1.5px]">
12 <input "color:#79c0ff">type="password" "color:#79c0ff">placeholder="••••••••"
13 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-3 py-2 text-sm text-white placeholder-slate-600 outline-none" />
14 </div>
15 <button "color:#79c0ff">className="group relative mt-2 w-full overflow-hidden rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-[1.02]
16 before:absolute before:inset-0 before:-translate-x-full before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-500 hover:before:translate-x-full">
17 Sign In
18 </button>
19 </div>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Gradient Subscribe

Join 50K+ developers

Stay in the loop

Get the latest components, tutorials and tips.

No spam. Unsubscribe at any time.

Email subscribe card with gradient badge, gradient heading, and shimmer CTA button.

T
gradient-subscribe.tsx
1<div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6 text-center">
2 <span "color:#79c0ff">className="inline-block rounded-full bg-gradient-to-r from-violet-500/20 to-fuchsia-500/20 px-4 py-1 text-xs font-bold text-violet-400 ring-1 ring-violet-500/30">
3 Join 50K+ developers
4 </span>
5 <h2 "color:#79c0ff">className="mt-3 bg-gradient-to-r from-violet-400 via-fuchsia-400 to-pink-400 bg-clip-text text-2xl font-extrabold text-transparent">
6 Stay in the loop
7 </h2>
8 <div "color:#79c0ff">className="mt-5 space-y-3">
9 <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500/40 to-fuchsia-500/40 p-[1.5px]">
10 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Enter your email..."
11 "color:#79c0ff">className="w-full rounded-[10px] bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 outline-none" />
12 </div>
13 <button "color:#79c0ff">className="w-full rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-[1.02]">
14 Subscribe Free
15 </button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Gradient Badges & Tags

Rainbow Gradient

Rainbow Badge

Individual Gradient Badges

ProNewBetaHotSale

Gradient Pill Chips

ReactTypeScriptTailwindNext.jsFramer

Rainbow gradient badges, individual gradient badges, and gradient pill chip tags.

T
gradient-badges-&-tags.tsx
1{/* Rainbow badge */}
2<span "color:#79c0ff">className="inline-block rounded-full px-4 py-1 text-sm font-bold text-white shadow-lg"
3 "color:#79c0ff">style={{ background: "linear-gradient(90deg, #f43f5e, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6)" }}>
4 Rainbow Badge
5</span>
6 
7{/* Solid gradient badges */}
8<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-3 py-1 text-xs font-semibold text-white">Pro</span>
9<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 px-3 py-1 text-xs font-semibold text-white">New</span>
10 
11{/* Tinted pill chips */}
12<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-500/20 to-fuchsia-500/20 px-3 py-1 text-xs font-semibold text-violet-400 ring-1 ring-violet-500/30">React</span>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Gradient Progress Bars

Design92%
Development78%
Marketing65%
Analytics84%
Support55%

Five progress bars each with a unique gradient fill, rounded track, and percentage label.

T
gradient-progress-bars.tsx
1<div>
2 <div "color:#79c0ff">className="mb-1.5 flex justify-between text-xs">
3 <span "color:#79c0ff">className="font-semibold text-slate-300">Design</span>
4 <span "color:#79c0ff">className="font-bold text-slate-400">92%</span>
5 </div>
6 <div "color:#79c0ff">className="h-3 w-full overflow-hidden rounded-full bg-slate-800">
7 <div "color:#79c0ff">className="h-full w-[92%] rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 shadow-md shadow-violet-500/50 transition-all duration-1000" />
8 </div>
9</div>
10<div>
11 <div "color:#79c0ff">className="mb-1.5 flex justify-between text-xs">
12 <span "color:#79c0ff">className="font-semibold text-slate-300">Development</span>
13 <span "color:#79c0ff">className="font-bold text-slate-400">78%</span>
14 </div>
15 <div "color:#79c0ff">className="h-3 w-full overflow-hidden rounded-full bg-slate-800">
16 <div "color:#79c0ff">className="h-full w-[78%] rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 shadow-md shadow-cyan-500/50 transition-all duration-1000" />
17 </div>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Aurora Background

Aurora

Layered radial gradients produce a mesmerizing aurora-borealis effect with shifting color blobs.

T
aurora-background.tsx
1<div "color:#79c0ff">className="relative h-48 w-full overflow-hidden rounded-2xl bg-slate-950">
2 <div "color:#79c0ff">className="absolute -top-10 left-1/4 h-48 w-48 animate-[float_6s_ease-in-out_infinite] rounded-full bg-violet-600/40 blur-3xl" />
3 <div "color:#79c0ff">className="absolute top-0 right-1/4 h-40 w-40 animate-[float_8s_ease-in-out_infinite_2s] rounded-full bg-cyan-500/40 blur-3xl" />
4 <div "color:#79c0ff">className="absolute bottom-0 left-1/3 h-36 w-36 animate-[float_7s_ease-in-out_infinite_1s] rounded-full bg-emerald-500/30 blur-3xl" />
5 <div "color:#79c0ff">className="absolute top-1/2 right-1/3 h-32 w-32 animate-[float_9s_ease-in-out_infinite_3s] rounded-full bg-pink-500/30 blur-3xl" />
6 <div "color:#79c0ff">className="relative flex h-full items-center justify-center">
7 <p "color:#79c0ff">className="text-2xl font-extrabold text-white/90 drop-shadow-xl">Aurora</p>
8 </div>
9</div>
⬡ UIDrop Component9 lines
TypeScript ReactUTF-8