/* ============================= */ /* PREMIUM LUXURY STARFIELD */ /* ============================= */ .starfield { position: relative; overflow: hidden; } /* 1. GOLD SHIMMER LAYER */ .starfield::before { content: ""; position: absolute; inset: 0; background: url('YOUR-GOLD-SHIMMER-IMAGE.png'); background-size: cover; opacity: 0.08; mix-blend-mode: screen; pointer-events: none; animation: shimmerPulse 8s ease-in-out infinite alternate; } /* 2. TWINKLE PARTICLES */ .starfield::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,215,130,0.4) 0%, rgba(255,215,130,0) 60%), radial-gradient(circle, rgba(255,215,130,0.25) 0%, rgba(255,215,130,0) 60%), radial-gradient(circle, rgba(255,215,130,0.15) 0%, rgba(255,215,130,0) 60%); background-size: 4px 4px, 6px 6px, 3px 3px; background-position: 20% 40%, 70% 20%, 50% 80%; opacity: 0.25; mix-blend-mode: screen; pointer-events: none; animation: starTwinkle 12s ease-in-out infinite alternate; } /* 3. FLOATING GOLD DUST PARTICLES */ .gold-dust { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,215,130,0.12) 0%, rgba(255,215,130,0) 70%), radial-gradient(circle, rgba(255,215,130,0.08) 0%, rgba(255,215,130,0) 80%); background-size: 200% 200%; animation: dustFloat 40s linear infinite; mix-blend-mode: screen; } /* 4. SOFT GOLD NEBULA GLOW */ .nebula { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 40%, rgba(255,200,120,0.15), rgba(0,0,0,0)); filter: blur(40px); animation: nebulaDrift 30s ease-in-out infinite alternate; pointer-events: none; } /* 5. PARALLAX DRIFT LAYER */ .drift { position: absolute; inset: 0; background: url('YOUR-GOLD-SHIMMER-IMAGE.png'); background-size: 105%; opacity: 0.04; animation: parallaxDrift 60s linear infinite; pointer-events: none; mix-blend-mode: screen; } /* ============================= */ /* ANIMATIONS */ /* ============================= */ @keyframes shimmerPulse { 0% { opacity: 0.04; } 100% { opacity: 0.12; } } @keyframes starTwinkle { 0% { opacity: 0.18; transform: scale(1); } 100% { opacity: 0.35; transform: scale(1.04); } } @keyframes dustFloat { 0% { background-position: 0 0; } 100% { background-position: 200% 200%; } } @keyframes nebulaDrift { 0% { transform: translate(-2%, -2%) scale(1); } 100% { transform: translate(2%, 2%) scale(1.08); } } @keyframes parallaxDrift { 0% { background-position: 0 0; } 100% { background-position: -20% -20%; } }

Robert Love

Blog