Transparent
Transparent Base
app/services/page.tsx
Used when page relies on global ambient canvas from layout.
bg-transparent
Background Inventory
Background styles currently used in this codebase
This page catalogs the major background styles in use across app and component files, including Tailwind classes, CSS utility backgrounds, and inline gradient compositions.
Tailwind Background Classes
Solid + Alpha
Dark Section Surface
app/services/page.tsx
bg-[#1a1a1a]/90
Solid + Alpha
Card Surface
app/blog/page.tsx
bg-[#171717]/95
RGBA + Blur
Blurred Container
app/services/page.tsx
bg-[rgba(10,10,12,0.82)] backdrop-blur-xl
Overlay
Overlay Pill
components/platforms-carousel.tsx
bg-black/35 backdrop-blur-sm
Glass Overlay
Soft White Glass
components/logo-marquee.tsx
bg-white/5
Solid Accent
Primary Lime Fill
app/products/page.tsx
bg-[#d1fc00]
Linear Gradient
Lime CTA Gradient
app/products/page.tsx
bg-[linear-gradient(134deg,#abd600_0%,#c6f332_100%)]
Linear Gradient
Depth Overlay
app/products/page.tsx
bg-[linear-gradient(180deg,rgba(0,0,0,0.16),rgba(0,0,0,0.08)_42%,rgba(0,0,0,0.28)_100%)]
Linear Gradient
Dark Panel Gradient
app/solutions/page.tsx
bg-[linear-gradient(180deg,rgba(42,42,42,0.72),rgba(20,20,20,0.92))]
Radial Gradient
Lime Orb Glow
app/services/page.tsx
bg-[radial-gradient(circle_at_center,rgba(198,243,50,0.26),rgba(198,243,50,0.03)_58%,transparent_72%)]
Radial Gradient
Ambient Radial Spread
app/solutions/page.tsx
bg-[radial-gradient(circle,rgba(171,214,0,0.18),rgba(171,214,0,0.02)_62%,transparent_75%)]
Directional Gradient
Ribbon Divider
app/services/page.tsx
bg-linear-to-r from-transparent via-[#4a5420] to-transparent
Directional Gradient
Vertical Hero Shade
components/platforms-carousel.tsx
bg-gradient-to-b from-black/10 via-transparent to-black/20
Tailwind Gradient
Text Badge Gradient
components/logo-section.tsx
bg-gradient-to-r from-lime-600/20 to-lime-500/20
Tailwind Gradient
Glass Card Gradient
components/platforms-carousel.tsx
bg-gradient-to-br from-white/15 to-white/5
Global CSS Utility Backgrounds
Global Utility
liquid-glass
app/globals.css
liquid-glass
Global Utility
liquid-glass-enhanced
app/globals.css
liquid-glass-enhanced
Global Utility
liquid-glass-header
app/globals.css
liquid-glass-header
Global Utility
glass-border
app/globals.css
glass-border
Global Utility
glass-border-enhanced
app/globals.css
glass-border-enhanced
Global Utility
glass-border-subtle
app/globals.css
glass-border-subtle
Inline / Composed Gradient Backgrounds
Multi-Layer Gradient
Gradient Base
components/ui/gradient.tsx
Composed Mesh Gradient
Shadcn Full Gradient
components/ui/gradient.tsx
Closest static preview of the installed animated background.
Radial Gradient
Teal Orb
components/ui/gradient.tsx
Radial Gradient
Violet Orb
components/ui/gradient.tsx
Radial Gradient
Blue Orb
components/ui/gradient.tsx
Radial Gradient
Pink Orb
components/ui/gradient.tsx
Radial Gradient
Purple Orb
components/ui/gradient.tsx
Composed Mesh Gradient
Cool Blend
app/backgrounds/page.tsx
Alternative with heavier teal and blue emphasis.
Composed Mesh Gradient
Violet Core
app/backgrounds/page.tsx
More centered and premium, closer to the screenshot mood.
Composed Mesh Gradient
Pink Blue Field
app/backgrounds/page.tsx
Useful when you want more color presence without going full neon.
Radial + Linear
Home Hero Overlay
app/page.tsx
Dual Radial
Blog Hero Accent
app/blog/page.tsx