Skip to content

Instantly share code, notes, and snippets.

@maxludden

maxludden/animated-dynamic-css-gradient.markdown

Created February 2, 2026 02:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maxludden/abdcc371012c545d9611e3e319389062 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maxludden/abdcc371012c545d9611e3e319389062 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Dynamic CSS Gradient
Raw
index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Centered Placeholder SVG</title>
<style>
:root {
color-scheme: dark light;
}
html,
body {
height: 100%;
}
body {
margin: 0;
/* Transparent background */
background: transparent;
/* Foreground color for the SVG (uses currentColor) */
color: rgba(255, 255, 255, 0.9);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
main.stage {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
box-sizing: border-box;
}
svg.placeholder {
width: min(900px, 92vw);
height: auto;
display: block;
max-width: 100%;
}
@media (prefers-color-scheme: light) {
body {
color: rgba(20, 20, 20, 0.9);
}
}
</style>
</head>
<body style="width:100%;height:100%;">
<main class="stage" aria-label="Centered placeholder SVG">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
<defs>
<linearGradient id='a' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='1' y2='1'>
<stop offset='0' stop-color='#ff00ff'>
<animate attributeName="stop-color" values="#ff00ff;#af00ff;#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;" dur="20s" repeatCount="indefinite">
</animate>
</stop>
<stop offset='10' stop-color='#af00ff'>
<animate attributeName="stop-color" values="#af00ff;#5f00ff;#0088ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;" dur="20s" repeatCount="indefinite">
</animate>
</stop>
<stop offset='20' stop-color='#5f00ff'>
<animate attributeName="stop-color" values="#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;#5f00ff;" dur="20s" repeatCount="indefinite">
</animate>
</stop>
<animateTransform attributeName="gradientTransform" type="rotate" from="0 .5 .5" to="360 .5 .5" dur="20s" repeatCount="indefinite" />
</linearGradient>
<linearGradient id='b' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='1' y2='1'>
<stop offset='0' stop-color='#ff00ff'>
<animate attributeName="stop-color" values="#ff00ff;#af00ff;#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;" dur="20s" repeatCount="indefinite">
</animate>
</stop>
<stop offset='20' stop-color='#af00ff' stop-opacity="10">
<animate attributeName="stop-color" values="#af00ff;#5f00ff;#0088ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;" dur="20s" repeatCount="indefinite">
</animate>
</stop>
<animateTransform attributeName="gradientTransform" type="rotate" values="360 .5 .5;0 .5 .5" class="ignore" dur="20s" repeatCount="indefinite" />
</linearGradient>
<style>
.stroke {
stroke: #bcbec0;
stroke-miterlimit: 10;
}
.a {
fill: url(#a);
}
.b {
fill: url(#b);
}
.black {
fill: #231f20;
}
.white {
fill: #efefef;
stroke: url(#a);
}
</style>
</defs>
<path class="white" d="M113.4,406.1h11.4v10.8h-25.1v-41.2h13.7v30.4ZM166.2,401.4c0,1.4-.3,2.5-.9,3.3-.6.8-1.6,1.1-3,1.1s-2.4-.4-3-1.1c-.6-.8-.9-1.9-.9-3.3v-25.7h-13.2v26.2c0,2.7.4,5.1,1.2,7.1.8,2,1.9,3.7,3.4,5,1.5,1.3,3.3,2.3,5.4,3,2.1.7,4.5,1,7,1s4.9-.3,7-1c2.1-.7,3.9-1.6,5.4-3,1.5-1.3,2.7-3,3.5-5s1.2-4.4,1.2-7.1v-26.2h-13.2v25.7ZM236.4,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9,2.1,1.7,3.7,3.9,4.8,6.5ZM225,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM294.1,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9s3.7,3.9,4.8,6.5ZM282.8,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM330.9,401.4h10.9v-10.3h-10.9v-4.6h11.1v-10.8h-24.3v41.2h24.7v-10.8h-11.6v-4.8ZM386.9,375.7v15.9l-11.4-15.9h-10.8v41.2h12.9v-15.8l11.3,15.8h10.9v-41.2h-12.9Z" />
<path class="black" d="M206.9,319.6l-19.5,27.2h62.4l-19.6-27.2h-23.3ZM99.1,49.2v317h54.4v-153l76.7,106.4h62.5v27.2h-42.9l13.9,19.4h62.3L99.1,49.2Z" />
<path class="a" d="M173.5,366.1h62.3l13.9-19.4h-62.4l19-26.5-32.8,45.9h0ZM206.9,319.6l-.5.7.5-.7ZM269.3,319.6l-19.6,27.2h42.9v-27.2h-23.2ZM400.4,49.2l-193.5,270.4h62.5l76.6-106.4v153h54.4V49.2h0Z" />
<path class="b" d="M173.5,366.1h62.3l13.9-19.4h-62.4l19-26.5-32.8,45.9h0ZM206.9,319.6l-.5.7.5-.7ZM269.3,319.6l-19.6,27.2h42.9v-27.2h-23.2ZM400.4,49.2l-193.5,270.4h62.5l76.6-106.4v153h54.4V49.2h0Z" />
<path class="white" d="M113.4,406.1h11.4v10.8h-25.1v-41.2h13.7v30.4ZM166.2,401.4c0,1.4-.3,2.5-.9,3.3-.6.8-1.6,1.1-3,1.1s-2.4-.4-3-1.1c-.6-.8-.9-1.9-.9-3.3v-25.7h-13.2v26.2c0,2.7.4,5.1,1.2,7.1.8,2,1.9,3.7,3.4,5,1.5,1.3,3.3,2.3,5.4,3,2.1.7,4.5,1,7,1s4.9-.3,7-1c2.1-.7,3.9-1.6,5.4-3,1.5-1.3,2.7-3,3.5-5s1.2-4.4,1.2-7.1v-26.2h-13.2v25.7ZM236.4,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9,2.1,1.7,3.7,3.9,4.8,6.5ZM225,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM294.1,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9s3.7,3.9,4.8,6.5ZM282.8,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM330.9,401.4h10.9v-10.3h-10.9v-4.6h11.1v-10.8h-24.3v41.2h24.7v-10.8h-11.6v-4.8ZM386.9,375.7v15.9l-11.4-15.9h-10.8v41.2h12.9v-15.8l11.3,15.8h10.9v-41.2h-12.9Z" />
</svg>
</main>
</body>
Raw
style.css
/* =========================================================
Base Design Tokens
========================================================= */
:root {
/* Color Palette */
--color-bg: #ffffff;
--color-surface: #f7f7f8;
--color-text: #111827;
--color-text-muted: #6b7280;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-accent: #7c3aed;
--color-border: #e5e7eb;
--color-focus: #93c5fd;
--color-danger: #dc2626;
--color-success: #16a34a;
/* Typography */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-size-base: 16px;
--line-height-base: 1.6;
/* Layout */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
}
/* =========================================================
Dark Mode Overrides
========================================================= */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0b0f19;
--color-surface: #111827;
--color-text: #e5e7eb;
--color-text-muted: #9ca3af;
--color-primary: #60a5fa;
--color-primary-hover: #3b82f6;
--color-accent: #a78bfa;
--color-border: #1f2933;
--color-focus: #2563eb;
--color-danger: #f87171;
--color-success: #4ade80;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.8);
}
}
/* =========================================================
Global Reset / Base
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: var(--font-size-base);
}
body {
margin: 0;
font-family: var(--font-sans);
line-height: var(--line-height-base);
background-color: var(--color-bg);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
}
/* =========================================================
Typography
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5em;
font-weight: 600;
line-height: 1.25;
}
p {
margin: 0 0 1em;
color: var(--color-text);
}
small {
color: var(--color-text-muted);
}
code,
pre {
font-family: var(--font-mono);
background-color: var(--color-surface);
border-radius: var(--radius-sm);
}
code {
padding: 0.15em 0.35em;
}
pre {
padding: 1rem;
overflow-x: auto;
}
/* =========================================================
Links
========================================================= */
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
a:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* =========================================================
Forms & Inputs
========================================================= */
input,
textarea,
select,
button {
font-family: inherit;
font-size: 1rem;
}
input,
textarea,
select {
padding: 0.5em 0.65em;
background-color: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px
color-mix(in srgb, var(--color-primary) 30%, transparent);
}
/* =========================================================
Buttons
========================================================= */
button {
padding: 0.5em 1em;
background-color: var(--color-primary);
color: #ffffff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
box-shadow: var(--shadow-sm);
}
button:hover {
background-color: var(--color-primary-hover);
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =========================================================
Utility Classes
========================================================= */
.container {
max-width: 72rem;
padding: 1rem;
margin: 0 auto;
}
.surface {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 1rem;
}
.text-muted {
color: var(--color-text-muted);
}
@keyframes colorCycle {
0% {
stop-color: #ff00ff;
}
20% {
stop-color: #0090ff;
}
40% {
stop-color: #00ff00;
}
60% {
stop-color: #ffff00;
}
80% {
stop-color: #ff0000;
}
100% {
stop-color: #ff00ff;
}
}
stop {
animation: colorCycle 20s linear infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment