<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>10 CSS Background Animations — Minimal & Professional</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--bg-body: #020617;
--bg-card: #020617;
--bg-card-soft: #020617;
--border-subtle: rgba(148, 163, 184, 0.28);
--text-primary: #f9fafb;
--text-muted: #9ca3af;
--accent: #4f46e5;
--accent-soft: rgba(79, 70, 229, 0.16);
--accent-strong: #6366f1;
--surface-elevated: #020617;
--radius-lg: 18px;
--radius-md: 12px;
--radius-pill: 999px;
--shadow-soft: 0 22px 45px rgba(15, 23, 42, 0.8);
--shadow-subtle: 0 10px 25px rgba(15, 23, 42, 0.9);
--transition-fast: 160ms ease-out;
}
* ,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Inter", sans-serif;
background: radial-gradient(circle at top, #0f172a 0, #020617 55%);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 24px;
}
@media (max-width: 768px) {
body {
padding: 16px;
}
}
.page {
width: 100%;
max-width: 1120px;
background: radial-gradient(circle at top left, #111827 0, #020617 55%);
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: var(--shadow-soft);
padding: 20px 22px 22px;
position: relative;
overflow: hidden;
}
.page::before {
content: "";
position: absolute;
inset: -40%;
background:
radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.45), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.45), transparent 55%);
opacity: 0.22;
filter: blur(40px);
z-index: -1;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: radial-gradient(circle at 30% 0%, #a855f7 0, #4f46e5 45%, #0f172a 100%);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(88, 28, 135, 0.65);
flex-shrink: 0;
}
.brand-icon ion-icon {
font-size: 20px;
color: #e5e7eb;
}
.brand-text-main {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
color: #f9fafb;
}
.brand-text-sub {
font-size: 12px;
color: var(--text-muted);
}
.header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.chip {
border-radius: var(--radius-pill);
border: 1px solid rgba(148, 163, 184, 0.4);
background: linear-gradient(120deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.6));
color: #e5e7eb;
font-size: 11px;
padding: 6px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 0.09em;
white-space: nowrap;
}
.chip-soft {
background: rgba(15, 23, 42, 0.6);
border-color: rgba(148, 163, 184, 0.4);
}
.chip ion-icon {
font-size: 14px;
color: #a5b4fc;
}
@media (max-width: 640px) {
.header {
flex-direction: column;
align-items: flex-start;
}
.header-actions {
justify-content: flex-start;
}
}
.main {
width: 100%;
}
.demo-layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
gap: 18px;
align-items: flex-start;
}
@media (max-width: 960px) {
.demo-layout {
grid-template-columns: minmax(0, 1fr);
}
}
.preview-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.preview-header-title {
font-size: 20px;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 4px;
}
.preview-header-copy {
font-size: 13px;
color: var(--text-muted);
max-width: 52ch;
}
.preview-background {
position: relative;
min-height: 340px;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: #020617;
box-shadow: var(--shadow-subtle);
border: 1px solid rgba(15, 23, 42, 0.9);
isolation: isolate;
}
@media (max-width: 768px) {
.preview-background {
min-height: 260px;
}
}
.preview-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 16px 14px;
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.9));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: #e5e7eb;
pointer-events: none;
}
.preview-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--radius-pill);
padding: 5px 10px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.55);
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
align-self: flex-start;
}
.preview-pill ion-icon {
font-size: 14px;
color: #a5b4fc;
}
.preview-meta {
pointer-events: auto;
padding: 10px 12px 10px;
border-radius: 14px;
background: linear-gradient(120deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.95));
border: 1px solid rgba(15, 23, 42, 0.85);
box-shadow: 0 16px 35px rgba(15, 23, 42, 0.88);
}
.preview-name {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 6px;
}
.preview-class {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.code-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.preview-class code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
padding: 3px 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(148, 163, 184, 0.45);
color: #e5e7eb;
}
.copy-btn {
border-radius: var(--radius-pill);
border: 1px solid rgba(148, 163, 184, 0.55);
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
cursor: pointer;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast),
color var(--transition-fast);
}
.copy-btn:hover {
background: var(--accent-soft);
border-color: #a5b4fc;
color: #e5e7eb;
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.45);
transform: translateY(-0.5px);
}
.copy-btn:active {
transform: translateY(0.5px) scale(0.98);
box-shadow: none;
border-color: #818cf8;
}
.copy-btn ion-icon {
font-size: 14px;
color: #c7d2fe;
}
.copy-btn.is-success {
border-color: #4ade80;
background: rgba(22, 163, 74, 0.18);
color: #dcfce7;
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}
.copy-btn.is-success ion-icon {
color: #bbf7d0;
}
.preview-description {
font-size: 12px;
color: var(--text-muted);
max-width: 56ch;
}
.animation-panel {
border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.97));
border: 1px solid rgba(30, 64, 175, 0.7);
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.9);
padding: 14px 12px 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.animation-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding-inline: 4px;
}
.animation-header h2 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #e5e7eb;
margin: 0;
}
.animation-header p {
margin: 0;
font-size: 11px;
color: var(--text-muted);
text-align: right;
}
.animation-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 2px;
max-height: 420px;
overflow: auto;
padding-right: 4px;
}
@media (max-width: 960px) {
.animation-panel {
padding: 12px 10px 10px;
}
}
@media (max-width: 768px) {
.animation-list {
grid-template-columns: minmax(0, 1fr);
max-height: none;
}
}
.animation-item {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 9px;
border-radius: 14px;
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.96));
border: 1px solid rgba(30, 64, 175, 0.7);
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.9);
transition:
border-color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast),
opacity var(--transition-fast);
position: relative;
}
.animation-item::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid transparent;
background: radial-gradient(circle at top, rgba(129, 140, 248, 0.4), transparent 60%);
opacity: 0;
transition: opacity var(--transition-fast);
pointer-events: none;
}
.animation-item:hover {
border-color: rgba(129, 140, 248, 0.9);
box-shadow: 0 16px 30px rgba(30, 64, 175, 0.7);
transform: translateY(-1px);
}
.animation-item:hover::after {
opacity: 0.7;
}
.animation-item:active {
transform: translateY(0) scale(0.99);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.95);
border-color: rgba(79, 70, 229, 0.9);
}
.animation-item.is-active {
border-color: #818cf8;
background: linear-gradient(125deg, rgba(15, 23, 42, 0.98), rgba(23, 37, 84, 0.98));
box-shadow: 0 18px 40px rgba(30, 64, 175, 0.9);
}
.animation-item.is-active::after {
opacity: 1;
}
.animation-thumb {
width: 56px;
height: 40px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
background-color: #020617;
position: relative;
border: 1px solid rgba(15, 23, 42, 0.9);
}
.animation-thumb::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.9));
mix-blend-mode: soft-light;
opacity: 0.7;
}
.animation-item-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.animation-title {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
color: #f9fafb;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.animation-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text-muted);
}
.animation-class {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 11px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(55, 65, 81, 0.85);
color: #e5e7eb;
}
.animation-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.95);
color: var(--text-muted);
}
.animation-tag ion-icon {
font-size: 13px;
color: #a5b4fc;
}
.animation-play {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.95);
color: #c7d2fe;
flex-shrink: 0;
}
.animation-item.is-active .animation-play {
background: rgba(129, 140, 248, 0.1);
border-color: #a5b4fc;
color: #e5e7eb;
}
.animation-play ion-icon {
font-size: 14px;
}
.animation-tag-label {
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Background animation utilities */
.preview-background,
.animation-thumb {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg-gradient-shift {
background-image: linear-gradient(
120deg,
#4f46e5,
#ec4899,
#22d3ee,
#4f46e5
);
background-size: 200% 200%;
animation: gradientShift 18s ease-in-out infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.bg-aurora {
background-color: #020617;
background-image:
radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.65), transparent 58%),
radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.7), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(45, 212, 191, 0.62), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.75), transparent 58%);
background-size: 145% 145%;
animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
0% {
background-position: -20% 0%, 120% 0%, 0% 120%, 100% 100%;
}
50% {
background-position: 0% 20%, 100% -20%, -20% 100%, 120% 80%;
}
100% {
background-position: 20% 0%, 80% 20%, 0% 80%, 100% 120%;
}
}
.bg-diagonal-stripes {
background-color: #020617;
background-image: repeating-linear-gradient(
135deg,
rgba(148, 163, 184, 0.26) 0,
rgba(148, 163, 184, 0.26) 1px,
transparent 1px,
transparent 14px
);
background-size: 26px 26px;
animation: stripes 16s linear infinite;
}
@keyframes stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 130px 130px;
}
}
.bg-particles {
background-color: #020617;
background-image: radial-gradient(
circle,
rgba(248, 250, 252, 0.33) 1px,
transparent 1px
);
background-size: 22px 22px;
animation: particles 38s linear infinite;
}
@keyframes particles {
0% {
background-position: 0 0;
}
100% {
background-position: -220px 220px;
}
}
.bg-spotlight {
position: relative;
background-color: #020617;
background-image:
radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.25), transparent 60%),
radial-gradient(circle at 100% 0%, rgba(244, 114, 182, 0.25), transparent 60%);
overflow: hidden;
}
.bg-spotlight::before {
content: "";
position: absolute;
inset: -35%;
background: radial-gradient(circle at 20% 20%, rgba(244, 244, 245, 0.16), transparent 60%);
mix-blend-mode: screen;
opacity: 0.9;
animation: spotlight 14s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes spotlight {
0% {
transform: translate3d(-12%, -10%, 0);
}
50% {
transform: translate3d(12%, 14%, 0);
}
100% {
transform: translate3d(26%, -12%, 0);
}
}
.bg-waves {
position: relative;
background-color: #020617;
overflow: hidden;
}
.bg-waves::before {
content: "";
position: absolute;
inset: -40%;
background:
radial-gradient(circle at 50% 120%, rgba(56, 189, 248, 0.45), transparent 60%),
radial-gradient(circle at 10% 120%, rgba(129, 140, 248, 0.35), transparent 55%),
radial-gradient(circle at 90% 130%, rgba(236, 72, 153, 0.35), transparent 55%);
opacity: 0.8;
animation: waves 22s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes waves {
0% {
transform: translate3d(-10%, 4%, 0) rotate(0deg);
}
50% {
transform: translate3d(8%, -8%, 0) rotate(2deg);
}
100% {
transform: translate3d(18%, 5%, 0) rotate(-1deg);
}
}
.bg-radial-pulse {
background-color: #020617;
background-image: radial-gradient(circle at center, rgba(59, 130, 246, 0.7) 0%, transparent 55%);
background-size: 140% 140%;
background-repeat: no-repeat;
animation: radialPulse 7s ease-in-out infinite;
}
@keyframes radialPulse {
0%,
100% {
background-size: 140% 140%;
opacity: 0.96;
}
50% {
background-size: 190% 190%;
opacity: 1;
}
}
.bg-conic-rotate {
position: relative;
background-color: #020617;
overflow: hidden;
}
.bg-conic-rotate::before {
content: "";
position: absolute;
inset: -20%;
background-image: conic-gradient(
from 0deg at 50% 50%,
#4f46e5,
#ec4899,
#22d3ee,
#4f46e5
);
opacity: 0.9;
animation: conicRotate 24s linear infinite;
pointer-events: none;
}
@keyframes conicRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.bg-grid-glow {
position: relative;
background-color: #020617;
background-image:
radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.32) 0, transparent 55%),
radial-gradient(circle at 100% 0, rgba(236, 72, 153, 0.3) 0, transparent 55%);
background-size: 150% 150%;
animation: aurora 28s ease-in-out infinite alternate;
overflow: hidden;
}
.bg-grid-glow::before {
content: "";
position: absolute;
inset: -10%;
background-image:
linear-gradient(to right, rgba(148, 163, 184, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(148, 163, 184, 0.22) 1px, transparent 1px);
background-size: 42px 42px;
mix-blend-mode: screen;
opacity: 0.8;
animation: gridDrift 26s linear infinite;
pointer-events: none;
}
@keyframes gridDrift {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-40px, -40px, 0);
}
}
.bg-minimal-shimmer {
background-color: #020617;
background-image: linear-gradient(
120deg,
rgba(248, 250, 252, 0.02) 0%,
rgba(248, 250, 252, 0.16) 18%,
rgba(248, 250, 252, 0.02) 36%
);
background-size: 220% 220%;
animation: shimmer 12s ease-in-out infinite;
}
@keyframes shimmer {
0% {
background-position: -80% 0;
}
50% {
background-position: 140% 0;
}
100% {
background-position: -80% 0;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.bg-gradient-shift,
.bg-aurora,
.bg-diagonal-stripes,
.bg-particles,
.bg-spotlight::before,
.bg-waves::before,
.bg-radial-pulse,
.bg-conic-rotate::before,
.bg-grid-glow,
.bg-grid-glow::before,
.bg-minimal-shimmer {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* Custom scrollbar (subtle) */
.animation-list::-webkit-scrollbar {
width: 6px;
}
.animation-list::-webkit-scrollbar-track {
background: transparent;
}
.animation-list::-webkit-scrollbar-thumb {
background: rgba(31, 41, 55, 0.9);
border-radius: 999px;
}
.animation-list::-webkit-scrollbar-thumb:hover {
background: rgba(55, 65, 81, 0.9);
}
</style>
</head>
<body>
<div class="page">
<header class="header">
<div class="brand">
<div class="brand-icon" aria-hidden="true">
<ion-icon name="color-wand-outline"></ion-icon>
</div>
<div>
<div class="brand-text-main">CSS Background Animation Kit</div>
<div class="brand-text-sub">10 minimal, production-ready background motions.</div>
</div>
</div>
<div class="header-actions" aria-hidden="true">
<div class="chip chip-soft">
<ion-icon name="code-slash-outline"></ion-icon>
Pure CSS + HTML
</div>
<div class="chip chip-soft">
<ion-icon name="layers-outline"></ion-icon>
10 background utilities
</div>
</div>
</header>
<main class="main">
<section class="demo-layout" aria-label="Background animation gallery">
<div class="preview-panel">
<header class="preview-header">
<div class="preview-header-title">Background animations for modern websites.</div>
<p class="preview-header-copy">
Select an animation to preview it full-width. Then copy the utility class into any hero, section, or component background.
</p>
</header>
<div
class="preview-background bg-gradient-shift"
id="previewBackground"
role="img"
aria-label="Gradient Shift background animation"
>
<div class="preview-overlay">
<div class="preview-pill">
<ion-icon name="flash-outline" aria-hidden="true"></ion-icon>
<span id="pillLabel">Active animation</span>
</div>
<div class="preview-meta">
<div class="preview-name" id="activeName">Gradient Shift</div>
<div class="preview-class">
<span class="code-label">Class</span>
<code id="activeClass">.bg-gradient-shift</code>
<button
type="button"
class="copy-btn"
id="copyBtn"
aria-label="Copy CSS class name"
>
<ion-icon class="copy-icon" name="copy-outline" aria-hidden="true"></ion-icon>
<span class="copy-label" id="copyLabel">Copy</span>
</button>
</div>
<p class="preview-description" id="activeDescription">
Soft, multi-stop gradient that gently shifts over time. Ideal for hero sections and minimal landing pages.
</p>
</div>
</div>
</div>
</div>
<aside class="animation-panel" aria-label="Animation picker">
<header class="animation-header">
<h2>Animations</h2>
<p>Click to preview & copy the utility class.</p>
</header>
<div class="animation-list">
<button
type="button"
class="animation-item is-active"
data-animation="gradient-shift"
data-classname="bg-gradient-shift"
data-name="Gradient Shift"
data-description="Soft, multi-stop gradient that gently shifts over time. Ideal for clean hero sections."
aria-pressed="true"
>
<div class="animation-thumb bg-gradient-shift"></div>
<div class="animation-item-main">
<div class="animation-title">Gradient Shift</div>
<div class="animation-meta">
<span class="animation-class">.bg-gradient-shift</span>
<span class="animation-tag">
<ion-icon name="color-wand-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Gradient</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="aurora"
data-classname="bg-aurora"
data-name="Aurora Glow"
data-description="Layered radial gradients that mimic a northern-lights glow with slow, organic motion."
aria-pressed="false"
>
<div class="animation-thumb bg-aurora"></div>
<div class="animation-item-main">
<div class="animation-title">Aurora Glow</div>
<div class="animation-meta">
<span class="animation-class">.bg-aurora</span>
<span class="animation-tag">
<ion-icon name="aperture-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Ambient</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="diagonal-stripes"
data-classname="bg-diagonal-stripes"
data-name="Diagonal Stripes"
data-description="Fine diagonal lines that drift slowly across the surface. Great for subtle depth behind cards."
aria-pressed="false"
>
<div class="animation-thumb bg-diagonal-stripes"></div>
<div class="animation-item-main">
<div class="animation-title">Diagonal Stripes</div>
<div class="animation-meta">
<span class="animation-class">.bg-diagonal-stripes</span>
<span class="animation-tag">
<ion-icon name="grid-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Pattern</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="particles"
data-classname="bg-particles"
data-name="Particle Field"
data-description="Subtle particle dots that drift diagonally, creating a calm, technical background texture."
aria-pressed="false"
>
<div class="animation-thumb bg-particles"></div>
<div class="animation-item-main">
<div class="animation-title">Particle Field</div>
<div class="animation-meta">
<span class="animation-class">.bg-particles</span>
<span class="animation-tag">
<ion-icon name="pulse-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Dots</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="spotlight"
data-classname="bg-spotlight"
data-name="Spotlight Sweep"
data-description="A soft highlight sweeps across the background, drawing focus without distracting content."
aria-pressed="false"
>
<div class="animation-thumb bg-spotlight"></div>
<div class="animation-item-main">
<div class="animation-title">Spotlight Sweep</div>
<div class="animation-meta">
<span class="animation-class">.bg-spotlight</span>
<span class="animation-tag">
<ion-icon name="flashlight-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Highlight</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="waves"
data-classname="bg-waves"
data-name="Liquid Waves"
data-description="Layered, slow-moving wave shapes that add a fluid accent to full-bleed sections."
aria-pressed="false"
>
<div class="animation-thumb bg-waves"></div>
<div class="animation-item-main">
<div class="animation-title">Liquid Waves</div>
<div class="animation-meta">
<span class="animation-class">.bg-waves</span>
<span class="animation-tag">
<ion-icon name="disc-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Organic</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="radial-pulse"
data-classname="bg-radial-pulse"
data-name="Radial Pulse"
data-description="A single radial highlight that slowly expands and contracts, perfect behind a centered call-to-action."
aria-pressed="false"
>
<div class="animation-thumb bg-radial-pulse"></div>
<div class="animation-item-main">
<div class="animation-title">Radial Pulse</div>
<div class="animation-meta">
<span class="animation-class">.bg-radial-pulse</span>
<span class="animation-tag">
<ion-icon name="radio-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Focus</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="conic-rotate"
data-classname="bg-conic-rotate"
data-name="Rotating Spectrum"
data-description="A conic gradient ring that rotates slowly for a refined, premium-feeling backdrop."
aria-pressed="false"
>
<div class="animation-thumb bg-conic-rotate"></div>
<div class="animation-item-main">
<div class="animation-title">Rotating Spectrum</div>
<div class="animation-meta">
<span class="animation-class">.bg-conic-rotate</span>
<span class="animation-tag">
<ion-icon name="ellipse-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Spectrum</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="grid-glow"
data-classname="bg-grid-glow"
data-name="Grid Glow"
data-description="A drifting grid with soft colored glows, great for dashboards and technical product pages."
aria-pressed="false"
>
<div class="animation-thumb bg-grid-glow"></div>
<div class="animation-item-main">
<div class="animation-title">Grid Glow</div>
<div class="animation-meta">
<span class="animation-class">.bg-grid-glow</span>
<span class="animation-tag">
<ion-icon name="grid-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Grid</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
<button
type="button"
class="animation-item"
data-animation="minimal-shimmer"
data-classname="bg-minimal-shimmer"
data-name="Minimal Shimmer"
data-description="A subtle shimmer that glides across the surface—barely noticeable, but adds a premium feel."
aria-pressed="false"
>
<div class="animation-thumb bg-minimal-shimmer"></div>
<div class="animation-item-main">
<div class="animation-title">Minimal Shimmer</div>
<div class="animation-meta">
<span class="animation-class">.bg-minimal-shimmer</span>
<span class="animation-tag">
<ion-icon name="contrast-outline" aria-hidden="true"></ion-icon>
<span class="animation-tag-label">Shimmer</span>
</span>
</div>
</div>
<div class="animation-play" aria-hidden="true">
<ion-icon name="play-outline"></ion-icon>
</div>
</button>
</div>
</aside>
</section>
</main>
</div>
<script>
(function () {
const preview = document.getElementById("previewBackground");
const activeName = document.getElementById("activeName");
const activeClass = document.getElementById("activeClass");
const activeDescription = document.getElementById("activeDescription");
const copyBtn = document.getElementById("copyBtn");
const copyLabel = document.getElementById("copyLabel");
const buttons = Array.from(document.querySelectorAll(".animation-item"));
let currentClassName = "bg-gradient-shift";
let copyTimeoutId = null;
function setActive(button) {
const name = button.dataset.name;
const description = button.dataset.description;
const className = button.dataset.classname;
if (!name || !className) return;
if (currentClassName) {
preview.classList.remove(currentClassName);
}
preview.classList.add(className);
currentClassName = className;
activeName.textContent = name;
activeClass.textContent = "." + className;
activeDescription.textContent = description;
preview.setAttribute("aria-label", name + " background animation");
buttons.forEach((btn) => {
const isActive = btn === button;
btn.classList.toggle("is-active", isActive);
btn.setAttribute("aria-pressed", isActive ? "true" : "false");
});
}
buttons.forEach((button) => {
button.addEventListener("click", () => setActive(button));
button.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
setActive(button);
}
});
});
copyBtn.addEventListener("click", async () => {
const text = activeClass.textContent.trim();
if (!text) return;
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(text);
}
copyLabel.textContent = "Copied";
copyBtn.classList.add("is-success");
if (copyTimeoutId) {
clearTimeout(copyTimeoutId);
}
copyTimeoutId = setTimeout(() => {
copyLabel.textContent = "Copy";
copyBtn.classList.remove("is-success");
}, 1500);
} catch (error) {
copyLabel.textContent = "Press ⌘C / Ctrl+C";
copyBtn.classList.remove("is-success");
}
});
})();
</script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
No comments yet. Be the first!