Skip to main
Table of Contents

Animated Background Hearts

This demo uses layered, repeating background textures with independent animation tracks to create a soft floating hearts effect behind page content.

  • Fixed full-viewport background container.
  • Independent bokeh and hearts layer motion.
  • Retina asset swap for high-density displays.

The tall spacer below is deliberate: it creates scrollable breathing room so the background effect can be viewed with less obstruction over a longer scroll range.

The Code

The snippets below show the exact structure and styling pattern used for this example, so you can copy the baseline and adapt layer assets, timing, and motion to your own effect.

HTML 

<div id="background-effect" class="background-effect--hearts">/n  <div id="background-effect__animations">/n    <div class="hearts-layer-bokeh"></div>/n    <div class="hearts-layer"></div>/n  </div>/n</div>

CSS 

#background-effect.background-effect--hearts {/n  bottom: 0;/n  left: 50%;/n  top: 0;/n  margin: 0;/n  position: fixed;/n  width: 100%;/n  transform: translateX(-50%);/n  z-index: -100;/n}/n/n#background-effect.background-effect--hearts div {/n  position: absolute;/n  width: 100%;/n  height: 100%;/n}/n/n#background-effect.background-effect--hearts #background-effect__animations {/n  animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);/n  background: linear-gradient(180deg, rgba(22, 57, 133, 0.13125) 12%, rgba(255, 255, 255, 0.0375) 50%, rgba(192, 68, 84, 0.1) 87%);/n}/n/n#background-effect.background-effect--hearts .hearts-layer-bokeh {/n  background-image: url(/asset/image/content/example/animated-background-effect-hearts/layer-bokeh-01.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-bokeh-02.png);/n  background-position: 0 0px, 0 0;/n  background-repeat: repeat, repeat;/n  background-size: 512px 512px, 512px 512px;/n  animation-duration: 300s;/n  animation-name: hearts-layer-bokeh-animation;/n  animation-iteration-count: infinite;/n  animation-timing-function: linear;/n  opacity: 0.0625;/n}/n/n#background-effect.background-effect--hearts .hearts-layer {/n  background-image: url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-04.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-03.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-02.png);/n  background-position: 0 0px, 0 0px, 0 0;/n  background-repeat: repeat, repeat, repeat;/n  background-size: 512px 512px, 512px 512px, 512px 512px;/n  animation-duration: 75s, 50s;/n  animation-name: hearts-layer-animation-x, hearts-layer-animation-y;/n  animation-iteration-count: infinite, infinite;/n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1), linear;/n  opacity: 0.15625;/n}/n/n@keyframes fade-in {/n  from {/n    opacity: 0;/n  }/n/n  to {/n    opacity: 1;/n  }/n}/n/n@keyframes hearts-layer-bokeh-animation {/n  from {/n    background-position: 0 0px, 0 0;/n  }/n/n  to {/n    background-position: 0 -10239px, 0 -6143px;/n  }/n}/n/n@keyframes hearts-layer-animation-x {/n  0% {/n    background-position-x: 0px, 0px, 0;/n  }/n/n  25% {/n    background-position-x: 256px, -256px, 128px;/n  }/n/n  50% {/n    background-position-x: 0px, 0px, 0;/n  }/n/n  75% {/n    background-position-x: -256px, 256px, -128px;/n  }/n/n  100% {/n    background-position-x: 0px, 0px, 0;/n  }/n}/n/n@keyframes hearts-layer-animation-y {/n  from {/n    background-position-y: 0px, 0px, 0;/n  }/n/n  to {/n    background-position-y: -2559px, -1535px, -1023px;/n  }/n}/n/n@media (min-resolution: 2dppx) {/n  #background-effect.background-effect--hearts .hearts-layer-bokeh {/n    background-image: url(/asset/image/content/example/animated-background-effect-hearts/layer-bokeh-01.x2.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-bokeh-02.x2.png);/n    animation-duration: 450s;/n  }/n/n  #background-effect.background-effect--hearts .hearts-layer {/n    background-image: url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-04.x2.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-03.x2.png), url(/asset/image/content/example/animated-background-effect-hearts/layer-hearts-02.x2.png);/n    animation-duration: 100s, 75s;/n  }/n}

Sources

This page is adapted from prior Cure and James Steele Seeley animated background explorations and updated to the current Synticore example conventions.