/* ================================================================
RTO Shared Background System
/shared/css/backgrounds.css
Add to any page:
Pure CSS animated backgrounds — all subtle, light, and
content-friendly. White cards sit on top with full readability.
Showcase: /shared/css/dev-background-showcase.html
================================================================ */
/* ── Option 1: Gradient Drift ────────────────────────
Smooth shifting between soft blue, purple, cyan, cream.
Pure CSS, zero extra DOM elements needed.
──────────────────────────────────────────────────── */
.bg-gradient-drift {
background: linear-gradient(-45deg, #e8f0fe, #f0e6ff, #e0f7fa, #fef9e7);
background-size: 400% 400%;
animation: bg-drift 20s ease infinite;
}
@keyframes bg-drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── Option 2: Floating Orbs ────────────────────────
Big blurred circles drifting slowly. Organic, modern.
Uses ::before and ::after pseudo-elements.
Optional: add for a 3rd orb.
──────────────────────────────────────────────────── */
.bg-floating-orbs {
background: #f8f9fa;
position: relative;
}
.bg-floating-orbs::before,
.bg-floating-orbs::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
.bg-floating-orbs::before {
width: 300px;
height: 300px;
background: #c7d2fe;
top: -50px;
left: -50px;
animation: orb-float-1 15s ease-in-out infinite;
}
.bg-floating-orbs::after {
width: 250px;
height: 250px;
background: #bae6fd;
bottom: -30px;
right: -30px;
animation: orb-float-2 18s ease-in-out infinite;
}
.bg-floating-orbs .orb-extra {
position: absolute;
width: 200px;
height: 200px;
background: #ddd6fe;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: orb-float-3 22s ease-in-out infinite;
z-index: 0;
pointer-events: none;
}
@keyframes orb-float-1 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(60px, 40px); }
66% { transform: translate(-20px, 60px); }
}
@keyframes orb-float-2 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(-50px, -30px); }
66% { transform: translate(30px, -50px); }
}
@keyframes orb-float-3 {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-30%, -60%) scale(1.2); }
}
/* ── Option 3: Mesh Gradient ────────────────────────
Layered radial gradients with gentle breathing pulse.
Modern "mesh" look. Pure CSS, zero extra DOM.
──────────────────────────────────────────────────── */
.bg-mesh-gradient {
background:
radial-gradient(ellipse at 20% 50%, rgba(199, 210, 254, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(186, 230, 253, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(221, 214, 254, 0.3) 0%, transparent 50%),
#f8f9fa;
animation: mesh-breathe 12s ease-in-out infinite;
}
@keyframes mesh-breathe {
0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
50% { background-size: 120% 120%, 110% 110%, 115% 115%, 100% 100%; }
}
/* ── Option 4: Diagonal Wave Bands ──────────────────
Soft diagonal stripes that slide continuously.
Pure CSS, zero extra DOM.
──────────────────────────────────────────────────── */
.bg-wave-bands {
background:
repeating-linear-gradient(
135deg,
transparent,
transparent 80px,
rgba(199, 210, 254, 0.15) 80px,
rgba(199, 210, 254, 0.15) 160px
),
repeating-linear-gradient(
135deg,
transparent,
transparent 120px,
rgba(186, 230, 253, 0.12) 120px,
rgba(186, 230, 253, 0.12) 200px
),
#f8f9fa;
background-size: 400px 400px, 600px 600px, 100% 100%;
animation: bands-slide 30s linear infinite;
}
@keyframes bands-slide {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 400px 400px, 600px 600px, 0 0; }
}
/* ── Option 5: Aurora Shimmer ───────────────────────
Slow rotating conic gradient with heavy blur.
Uses ::before pseudo-element. Needs overflow:hidden on body.
──────────────────────────────────────────────────── */
.bg-aurora {
background: #f0f4f8;
position: relative;
overflow: hidden;
}
.bg-aurora::before {
content: '';
position: absolute;
inset: -50%;
background: conic-gradient(
from 0deg at 50% 50%,
rgba(199, 210, 254, 0.3),
rgba(186, 230, 253, 0.2),
rgba(221, 214, 254, 0.3),
rgba(254, 249, 231, 0.2),
rgba(199, 210, 254, 0.3)
);
animation: aurora-spin 40s linear infinite;
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
@keyframes aurora-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ── Option 6: Pulse Rings ──────────────────────────
Concentric circles that breathe slowly.
Needs 3 child divs: x3
──────────────────────────────────────────────────── */
.bg-pulse-rings {
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.bg-pulse-rings .ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(99, 102, 241, 0.08);
z-index: 0;
pointer-events: none;
}
.bg-pulse-rings .ring:nth-child(1) {
width: 200px; height: 200px;
animation: ring-pulse 6s ease-in-out infinite;
}
.bg-pulse-rings .ring:nth-child(2) {
width: 400px; height: 400px;
animation: ring-pulse 6s ease-in-out infinite 1s;
}
.bg-pulse-rings .ring:nth-child(3) {
width: 600px; height: 600px;
animation: ring-pulse 6s ease-in-out infinite 2s;
}
@keyframes ring-pulse {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}
/* ── Option 7: Soft Drift ───────────────────────────
Three corner gradients shifting positions slowly.
Pure CSS, zero extra DOM.
──────────────────────────────────────────────────── */
.bg-soft-drift {
background:
linear-gradient(135deg, rgba(199, 210, 254, 0.25), transparent 40%),
linear-gradient(225deg, rgba(186, 230, 253, 0.25), transparent 40%),
linear-gradient(315deg, rgba(221, 214, 254, 0.2), transparent 40%),
#f8f9fa;
background-size: 200% 200%;
animation: soft-drift 25s ease infinite;
}
@keyframes soft-drift {
0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
33% { background-position: 100% 50%, 0% 100%, 100% 0%, 0 0; }
66% { background-position: 50% 100%, 50% 0%, 0% 50%, 0 0; }
100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
}
/* ── Option 8: Floating Diamonds ────────────────────
Ghost diamond shapes drifting slowly.
Needs 5 child divs: x5
──────────────────────────────────────────────────── */
.bg-diamonds {
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.bg-diamonds .diamond {
position: absolute;
width: 60px;
height: 60px;
border: 1px solid rgba(99, 102, 241, 0.08);
transform: rotate(45deg);
border-radius: 4px;
z-index: 0;
pointer-events: none;
}
.bg-diamonds .diamond:nth-child(1) {
top: 10%; left: 15%; width: 50px; height: 50px;
animation: diamond-drift-1 20s ease-in-out infinite;
}
.bg-diamonds .diamond:nth-child(2) {
top: 60%; left: 70%; width: 80px; height: 80px;
border-color: rgba(59, 130, 246, 0.06);
animation: diamond-drift-2 25s ease-in-out infinite;
}
.bg-diamonds .diamond:nth-child(3) {
top: 30%; left: 50%; width: 40px; height: 40px;
border-color: rgba(139, 92, 246, 0.07);
animation: diamond-drift-3 18s ease-in-out infinite;
}
.bg-diamonds .diamond:nth-child(4) {
top: 75%; left: 20%; width: 70px; height: 70px;
border-color: rgba(59, 130, 246, 0.05);
animation: diamond-drift-1 22s ease-in-out infinite reverse;
}
.bg-diamonds .diamond:nth-child(5) {
top: 15%; left: 80%; width: 55px; height: 55px;
border-color: rgba(139, 92, 246, 0.06);
animation: diamond-drift-2 28s ease-in-out infinite reverse;
}
@keyframes diamond-drift-1 {
0%, 100% { transform: rotate(45deg) translate(0, 0); }
50% { transform: rotate(45deg) translate(20px, 15px); }
}
@keyframes diamond-drift-2 {
0%, 100% { transform: rotate(45deg) translate(0, 0); }
50% { transform: rotate(45deg) translate(-25px, 10px); }
}
@keyframes diamond-drift-3 {
0%, 100% { transform: rotate(45deg) translate(0, 0); }
50% { transform: rotate(45deg) translate(15px, -20px); }
}
/* ── Option 9: Brand Drift (RTO Blue) ───────────────
Same drift animation as #1 but tuned to RTO's
#003366 palette (lightened). Branded feel.
Pure CSS, zero extra DOM.
──────────────────────────────────────────────────── */
.bg-brand-drift {
background: linear-gradient(-45deg, #e8f0fe, #dce8f5, #e0eaf4, #f0f4f8);
background-size: 400% 400%;
animation: bg-drift 18s ease infinite;
}
/* Reuses @keyframes bg-drift from Option 1 */
/* ── Option 10: Layered Waves ───────────────────────
Curved wave shapes at the bottom that sway gently.
Needs 3 child divs: x3
──────────────────────────────────────────────────── */
.bg-layered-waves {
background: #f0f4f8;
position: relative;
overflow: hidden;
}
.bg-layered-waves .wave {
position: absolute;
width: 200%;
height: 200px;
border-radius: 40%;
z-index: 0;
opacity: 0.15;
pointer-events: none;
}
.bg-layered-waves .wave:nth-child(1) {
background: #6366f1;
bottom: -120px;
left: -50%;
animation: wave-sway 20s ease-in-out infinite;
}
.bg-layered-waves .wave:nth-child(2) {
background: #3b82f6;
bottom: -140px;
left: -50%;
animation: wave-sway 25s ease-in-out infinite reverse;
opacity: 0.1;
}
.bg-layered-waves .wave:nth-child(3) {
background: #8b5cf6;
bottom: -160px;
left: -50%;
animation: wave-sway 18s ease-in-out infinite 2s;
opacity: 0.08;
}
@keyframes wave-sway {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(5%) rotate(1deg); }
}
/* ── Option 11: Spinning Cubes ─────────────────────
Rotating square outlines that grow and fade out.
Needs 10 child divs: x10
Works on any solid or gradient background.
Cube color adapts via --cube-color (default: white @18%).
──────────────────────────────────────────────────── */
.bg-spinning-cubes {
position: relative;
overflow: hidden;
}
.bg-spinning-cubes > *:not(.bg-cube) {
position: relative;
z-index: 1;
}
.bg-cube {
position: absolute;
width: 10px;
height: 10px;
border: solid 1px var(--cube-color, rgba(255, 255, 255, 0.18));
transform-origin: top left;
transform: scale(0) rotate(0deg) translate(-50%, -50%);
animation: bg-cube-spin 12s ease-in infinite;
z-index: 0;
pointer-events: none;
}
.bg-cube:nth-child(2n) {
border-color: var(--cube-color-alt, rgba(255, 255, 255, 0.25));
}
.bg-cube:nth-child(1) { top: 80vh; left: 45vw; animation-delay: 0s; }
.bg-cube:nth-child(2) { top: 40vh; left: 25vw; animation-delay: 2s; }
.bg-cube:nth-child(3) { top: 50vh; left: 75vw; animation-delay: 4s; }
.bg-cube:nth-child(4) { top: 10vh; left: 90vw; animation-delay: 6s; }
.bg-cube:nth-child(5) { top: 85vh; left: 10vw; animation-delay: 8s; }
.bg-cube:nth-child(6) { top: 10vh; left: 50vw; animation-delay: 10s; }
.bg-cube:nth-child(7) { top: 65vh; left: 80vw; animation-delay: 1s; }
.bg-cube:nth-child(8) { top: 20vh; left: 15vw; animation-delay: 3s; }
.bg-cube:nth-child(9) { top: 70vh; left: 60vw; animation-delay: 5s; }
.bg-cube:nth-child(10) { top: 30vh; left: 5vw; animation-delay: 7s; }
@keyframes bg-cube-spin {
0% {
transform: scale(0) rotate(0deg) translate(-50%, -50%);
opacity: 1;
}
100% {
transform: scale(20) rotate(960deg) translate(-50%, -50%);
opacity: 0;
}
}
/* ── Option 12: Blue Shift ────────────────────────────
Animated gradient cycling through deep blue shades.
Pure CSS, zero extra DOM. Great for login/auth pages.
Pairs well with bg-spinning-cubes (white cube defaults).
Sets --cube-color vars tuned for dark blue background.
──────────────────────────────────────────────────── */
.bg-blue-shift {
background: linear-gradient(135deg, #002a80, #0040C1, #1a5cd8, #0040C1);
background-size: 400% 400%;
animation: bg-blue-shift 15s ease infinite;
--cube-color: rgba(100, 160, 255, 0.18);
--cube-color-alt: rgba(140, 190, 255, 0.25);
}
@keyframes bg-blue-shift {
0% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 50%; }
}
/* ── z-index helper ─────────────────────────────────
Content on top of background effects.
Add to your main content wrapper if needed.
──────────────────────────────────────────────────── */
.bg-content {
position: relative;
z-index: 1;
}