Animated Mesh Gradient
A multi-point mesh gradient that slowly drifts — a modern hero background.
<div class="mesh"><h3>Mesh Gradient</h3></div>body{background:#0d1426}
.mesh{width:300px;height:200px;border-radius:20px;display:grid;place-items:center;color:#fff;font:800 22px/1 system-ui,sans-serif;background:radial-gradient(at 20% 20%,#ff7a18 0,transparent 50%),radial-gradient(at 80% 0,#ff477e 0,transparent 50%),radial-gradient(at 0 80%,#5b6cff 0,transparent 50%),radial-gradient(at 80% 80%,#00d4ff 0,transparent 50%),#1a1f36;background-size:200% 200%;animation:mesh 8s ease infinite}
@keyframes mesh{0%,100%{background-position:0 0,100% 0,0 100%,100% 100%}50%{background-position:100% 100%,0 100%,100% 0,0 0}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.