<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<div class="wrapper">
<h2>Apply same --myColor variable to multiple css rules.</h2>
<p>Tweening the <strong> --myColor</strong> variable will update multiple elements.</p>

<div class="cool">this is cool </div>

body {
  margin: 20px;

html {
  --myColor: green;

h2 {
  font-size: 20px;

.wrapper {
  border: 1px solid var(--myColor);
  border-radius: 14px;
  margin-right: 10px;

 h2, strong {
  color: var(--myColor);

.cool {
  display: inline-block;
  padding: 10px;
  color: white;
  border-radius: 8px;
  background-color: var(--myColor);

gsap.to("html", {
  "--myColor": "orange", 
  duration: 1,
  yoyo: true, 
  repeat: 20

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js