Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <use-rainbow hue="240">
  <div>
    <h2 style="color: var(--use-rainbow)">heading 1</h2>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ab est nulla repellat atque itaque dolorum enim reiciendis aliquam ducimus? Sint quo voluptate iure beatae magni consequatur assumenda officiis? Deserunt.</span>
      <span>Repudiandae praesentium labore reiciendis libero impedit vel adipisci similique sint odio perspiciatis alias, ab soluta at accusantium, quos officiis recusandae ratione itaque assumenda iste, deserunt inventore consectetur rerum. Soluta, iure.</span>
      <span>Sint quibusdam ducimus, accusamus repellat velit optio inventore, distinctio nulla debitis maxime suscipit fuga porro a quia sequi officiis quod quas sit iusto expedita nostrum accusantium. Iure, et. Praesentium, eius.</span>
      <span>Labore rem fugit incidunt, architecto molestias accusamus quasi repellat, delectus quam magni hic aspernatur obcaecati atque quidem corporis nulla, qui culpa ratione? Voluptatibus sint quasi ab esse dignissimos consequatur provident.</span>
      <span>Maxime accusantium iure quis nam eveniet porro itaque soluta, ab nisi, architecto nulla corporis? Dignissimos suscipit laborum sit aperiam, nihil architecto dolor ex eaque? Impedit obcaecati sint tempora necessitatibus nesciunt.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nam reprehenderit delectus enim a fuga, ut corrupti dicta. Provident architecto et, molestiae esse illo voluptatum harum voluptatibus dolore qui vero!</span>
      <span>Possimus itaque veritatis est, fuga nisi quibusdam neque adipisci temporibus quia cum odit at voluptatum, eos reprehenderit! Possimus adipisci illo, sed fuga optio nesciunt, nobis officiis vero autem ducimus tenetur?</span>
      <span>Repellat iure culpa mollitia, consequatur dolores, natus eius delectus voluptatum optio, provident adipisci in? Nam odio perferendis, adipisci expedita modi in architecto eaque est, nostrum illum esse ad unde. Repudiandae.</span>
      <span>Ullam velit aut expedita at maxime accusamus inventore praesentium quaerat fugiat non, a, reprehenderit voluptates amet quas saepe tempora unde dicta tenetur provident consectetur asperiores quos cumque. Laborum, cumque minus.</span>
      <span>Tenetur esse dolorem et quae id quos sequi fuga nesciunt incidunt iste quas recusandae, soluta illo consequatur ipsam, a provident repudiandae vel iusto voluptate aperiam cupiditate perferendis. Totam, odit ipsam.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente deleniti necessitatibus officia. Facilis inventore eius minima itaque sed fugiat accusamus saepe, autem, sunt corporis quaerat similique qui pariatur architecto esse.</span>
      <span>Unde consequatur excepturi earum corrupti at iure quas, natus explicabo distinctio nulla quaerat commodi. Placeat, pariatur at fugiat quas doloremque ipsa inventore dolore ab, laborum quis sapiente sed explicabo dolor!</span>
      <span>Dolores dolorem amet sequi numquam, quas pariatur nobis odio harum possimus, iusto beatae dignissimos est delectus at molestias repellendus cum sunt. Ad nemo cumque porro assumenda culpa! Minima, accusamus quaerat.</span>
      <span>Magnam fugiat repellat architecto ullam accusantium quia aperiam totam, incidunt asperiores ipsam magni officiis, explicabo dolorum? Dolorem porro ullam voluptatum fugit magnam quis placeat explicabo provident aperiam! Nemo, adipisci eum!</span>
      <span>Architecto blanditiis laborum provident esse officia ipsa similique perferendis reprehenderit recusandae eius magni, laboriosam commodi. Quis eum, sequi officiis blanditiis consequuntur numquam vero laboriosam in unde rem tempore, nostrum recusandae.</span>
    </p>
  </div>
  <div>
    <h2>heading 2</h2>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi veritatis necessitatibus, repellat nam labore fugiat possimus. Praesentium officiis qui ab, consectetur neque, voluptatum reprehenderit earum, in doloremque eius atque consequatur?</span>
      <span>Fugiat aut nulla cupiditate beatae quam, assumenda perspiciatis eum autem quisquam esse dolore nihil veritatis, aliquid consequatur similique. Ab, enim. Culpa veniam unde dolorem autem obcaecati cumque officiis esse impedit.</span>
      <span>Explicabo, neque! Numquam ipsam nulla molestiae recusandae magnam consectetur officia, nisi, minus ex necessitatibus itaque nihil? Eveniet fugit deleniti ratione et numquam quis voluptas officia reprehenderit. Nemo vero atque debitis.</span>
      <span>Fuga dolorum hic eius quidem natus modi quos error odio, laudantium architecto nulla repellendus, perspiciatis illo nisi atque impedit sed! Voluptate voluptas fugiat minus odio iste unde quam ab voluptatibus.</span>
      <span>Nemo necessitatibus, labore rem fugiat quae provident accusamus voluptatem odio ducimus eligendi illo culpa enim, repellendus unde vel aut molestias hic ipsam esse nihil vero aliquid dicta soluta! Doloribus, animi.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit doloribus tempore magni, nobis excepturi nisi voluptates soluta ipsum at eaque modi officia molestiae magnam voluptatibus iure possimus sunt quam aliquam?</span>
      <span>Eligendi eos minus nobis quod iusto inventore laboriosam libero dolores fugiat dolore voluptas nostrum possimus aspernatur, beatae corrupti odit ea repellat! Nisi minima facere earum dolorem ullam! Accusantium, saepe quisquam!</span>
      <span>Delectus neque doloribus quibusdam! Natus, porro. Soluta similique iure ipsum velit quisquam adipisci! Quaerat maxime deleniti consequuntur temporibus quo incidunt provident non optio iusto consectetur, laudantium cumque rerum repellendus odit.</span>
      <span>Assumenda illo molestias necessitatibus numquam aperiam error fugiat officiis. Repellat temporibus corporis impedit in. Ipsa ut maxime enim atque molestias veritatis debitis nostrum dolorum, repellat voluptatum ex, eius cupiditate error?</span>
      <span>Accusamus magnam architecto magni? Enim atque cupiditate libero. Accusantium quasi voluptate reprehenderit recusandae qui error, minus repudiandae magnam placeat culpa asperiores voluptas veritatis nam maiores dignissimos illum quam fugiat assumenda!</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque pariatur dolores asperiores quam magni nemo fugit. Eos animi praesentium ex, mollitia quod commodi ipsum cumque alias nemo molestias enim eaque?</span>
      <span>Autem modi earum debitis enim non deleniti libero odio, voluptas animi pariatur! Tempore deserunt dolores, libero sint ipsum vero in molestiae? Dolor, reiciendis aliquam. Dolore exercitationem corrupti laboriosam perferendis magnam?</span>
      <span>Quo atque unde dolor voluptatem temporibus molestias tenetur earum dolorum assumenda doloribus non aut eligendi reiciendis cumque explicabo ab, excepturi dignissimos ex esse sint illum inventore. Laborum, aliquid explicabo? Sunt?</span>
      <span>Expedita quae, tempore neque mollitia quo porro minima, architecto explicabo eligendi eaque perferendis ex ut consequatur temporibus iure accusantium, placeat deleniti pariatur suscipit fugiat saepe quia illum unde qui. Explicabo?</span>
      <span>Illum nobis porro saepe dolorem pariatur totam inventore quaerat debitis culpa, vero deserunt cumque iste amet? Animi hic ex suscipit enim! In ratione quam, doloribus dignissimos laboriosam recusandae omnis quidem?</span>
    </p>
  </div>
  <div>
    <h2>heading 3</h2>
    <p>
      <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia enim consequatur soluta. Laboriosam rem, eligendi fuga fugit inventore cum? Nemo laborum error nisi quod odit aliquam obcaecati animi ducimus deleniti.</span>
      <span>Provident dolorum officia laboriosam at, deleniti delectus nobis eum mollitia sit, ratione omnis corrupti hic porro nam eius, quisquam fugit voluptates quod. Incidunt, laborum nisi assumenda placeat suscipit ut magnam.</span>
      <span>Itaque doloribus accusantium natus ipsam quisquam nulla. Similique corrupti facilis sit quo eveniet, soluta, quasi quidem beatae sapiente consectetur, officia laudantium delectus impedit a hic quod molestiae! Corrupti, architecto nemo.</span>
      <span>Ullam adipisci ea alias a laborum minus nobis itaque debitis odit tenetur inventore maiores veniam architecto totam quibusdam molestias cumque aliquid, fugiat nam nihil placeat? Quaerat aspernatur nihil dolorem asperiores!</span>
      <span>Tenetur doloremque quasi nostrum illo quibusdam. Neque laboriosam expedita perspiciatis libero provident fugiat at! Quas vitae vel libero non deserunt praesentium nihil molestiae fugit, laborum distinctio quia dignissimos unde cumque.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam dignissimos laboriosam suscipit facere error alias dolores facilis fugiat eum, temporibus tempore qui quod debitis eveniet quam? Tempore, eius aliquam? Corporis.</span>
      <span>Eaque, incidunt illo, doloremque impedit ad aut nobis quod natus voluptates accusamus consectetur distinctio necessitatibus! Veniam unde incidunt tempora quidem officia veritatis. Optio accusantium ipsum adipisci vitae voluptatum beatae quasi.</span>
      <span>Obcaecati eum quibusdam, tempore voluptate inventore natus debitis soluta sint totam minima dicta nisi tenetur quia impedit nam unde consequuntur cumque. Perspiciatis, sunt cumque illum aut excepturi sapiente expedita aliquid.</span>
      <span>Quod debitis sapiente ducimus iusto quasi error sequi rerum doloribus assumenda non, accusantium distinctio adipisci deserunt aperiam, cum consequatur iure temporibus quos! Voluptate atque nemo dicta quaerat recusandae enim ab?</span>
      <span>Numquam debitis adipisci dolores iure reprehenderit itaque optio beatae sapiente atque aperiam. Laudantium iusto voluptatum aliquam iste provident numquam distinctio autem deleniti soluta sit delectus, itaque inventore perferendis nobis vitae.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, placeat similique porro quae fugit pariatur illo possimus laboriosam nesciunt? Molestiae error rem obcaecati dolorem minima culpa eveniet, odio quo fugiat!</span>
      <span>Sequi nobis sapiente eaque officia, beatae accusamus voluptatibus earum dolorum consequuntur cumque aperiam repellendus nemo labore excepturi culpa dolorem quod animi doloremque commodi laboriosam ad ducimus, itaque et quisquam. Animi?</span>
      <span>Doloremque officia similique hic incidunt, velit rem dicta, aspernatur ad saepe, animi cupiditate sequi excepturi? Esse ad cumque eveniet ea accusamus mollitia odio optio aspernatur atque delectus, ipsa veniam sunt.</span>
      <span>Dolor, delectus sit repellat mollitia quos perferendis omnis minima maxime possimus non dolorum ad facilis maiores excepturi magnam esse ipsum necessitatibus beatae consectetur earum nemo praesentium voluptate. Reiciendis, laboriosam porro?</span>
      <span>Mollitia quidem voluptatem in voluptatibus dolores eos deserunt nobis asperiores modi eaque quos corporis nulla, placeat odio molestiae iure tempore ducimus itaque doloribus omnis facilis aut aspernatur laudantium. Impedit, eius.</span>
    </p>
  </div>
  <div>
    <h2>heading 4</h2>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maiores fugiat quod totam nobis facere laudantium dolorum soluta minus, praesentium quia minima quidem quaerat aliquam impedit voluptas! Magnam, non qui?</span>
      <span>Nihil eligendi nulla aliquam placeat totam eveniet consequatur. Quis, alias, ipsam voluptatem sequi inventore eveniet sunt rem dolore consequatur unde iste harum ipsum minus fugiat. Saepe iste omnis nobis vel.</span>
      <span>Ullam nesciunt reprehenderit tempore, corrupti asperiores quia consequuntur dignissimos dolorem, ab ea eaque dolorum sunt. Ipsum perspiciatis corrupti expedita ad aliquam explicabo, dolorem aliquid! Deserunt, distinctio odio. Perferendis, qui quasi!</span>
      <span>Totam soluta, rerum expedita vitae cupiditate aut, repellat sit, corporis id laudantium modi harum voluptate. Magni cumque ipsam, temporibus molestiae cupiditate voluptate minima quisquam officia ducimus aperiam quod esse. Natus.</span>
      <span>Error, laborum corrupti adipisci animi quasi voluptates facere. Reiciendis neque exercitationem atque incidunt eius, consequuntur fuga adipisci voluptatibus odio voluptatem, ex ut rerum soluta nesciunt nisi consequatur, sit quis odit.</span>
    </p>
    <p>
      <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur consequatur, at eum, nulla laboriosam fugiat aut repellendus ab quisquam atque adipisci ducimus animi dolor optio. Distinctio fuga temporibus mollitia at!</span>
      <span>Animi eligendi molestiae velit cumque pariatur quas eum excepturi iste, adipisci aliquam beatae explicabo nam laudantium quasi molestias possimus hic corrupti accusantium, odit assumenda vel? Non perspiciatis aliquam minus corporis!</span>
      <span>Atque architecto natus animi accusamus dignissimos quo modi voluptatum labore dolorem vero eum quas libero repellat nemo unde ab facilis aliquid sunt nam omnis, veniam, magnam consequatur? Rem, voluptatibus neque.</span>
      <span>Dolore labore id aliquam quasi. Perspiciatis in quos accusantium facilis? Officia magni dolore excepturi quasi, voluptatum culpa, dolorum blanditiis perferendis ipsa voluptates facere odit sapiente debitis iste error nemo atque?</span>
      <span>Unde veritatis omnis culpa corporis! Repellat fugiat iure praesentium assumenda nihil quibusdam ab, quaerat dolores perspiciatis laborum! Obcaecati laborum officia sit culpa adipisci praesentium earum aliquam, sapiente nostrum laudantium tenetur.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iusto accusantium laborum libero? Nostrum modi quos dicta earum atque eligendi temporibus culpa ut consequuntur, laborum ducimus nam officiis, quo sunt.</span>
      <span>Distinctio accusamus totam aperiam est esse sit sequi ipsam ab saepe. Aliquid, labore. Maxime consectetur esse, perferendis, temporibus repellat ea illo unde ratione similique explicabo rem distinctio. Optio, quae dicta.</span>
      <span>Id aliquam illum, quis quo similique labore a mollitia, eius praesentium doloremque, architecto dolores unde vitae hic iusto! Aliquam cum commodi excepturi. Animi quibusdam aperiam tempora deserunt sequi exercitationem explicabo?</span>
      <span>Qui delectus magni optio obcaecati iure quod eum quia nam excepturi explicabo placeat minus commodi quam architecto odit possimus, ut nemo ab. Nemo et commodi praesentium accusamus consequatur, quas quasi?</span>
      <span>Minus odit adipisci, excepturi fuga non ratione animi tenetur inventore, cum vero totam numquam molestias amet perferendis asperiores error ex mollitia itaque nesciunt enim! Commodi doloremque nobis ut dolore eius.</span>
    </p>
  </div>
  <div>
    <h2>heading 5</h2>
    <p>
      <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem incidunt cum harum ullam provident ea facilis magnam sunt ab eaque sit, eum necessitatibus praesentium ipsam fugiat debitis assumenda architecto sint.</span>
      <span>Quia tempora porro optio fugit repellat mollitia. Ducimus possimus reiciendis minima fugit cupiditate dolorem corrupti quisquam! Tenetur neque at molestias error dolores numquam optio! Cupiditate, nam! Quidem numquam quisquam fugiat.</span>
      <span>Eaque totam minima cum maxime! Fuga dolorum praesentium sequi nemo id perspiciatis ut earum expedita omnis dolor nihil quaerat quasi sapiente, facilis ad perferendis! Quisquam sit minima iste tempore doloremque.</span>
      <span>Aliquid commodi aut cupiditate atque? Laudantium eum odio nulla eos delectus consectetur velit repellendus, facere voluptas quo impedit mollitia eligendi ipsum beatae corrupti a minus sit illum porro sequi libero?</span>
      <span>Aperiam fuga saepe ab commodi maxime velit perspiciatis reprehenderit, deserunt veritatis atque sequi cum vero quod nam? Aspernatur exercitationem quas placeat sequi debitis repudiandae nemo, minima facere repellendus corporis labore.</span>
    </p>
    <p>
      <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, explicabo! Ipsa nobis exercitationem unde odio autem mollitia animi perferendis velit fugit tenetur, architecto fugiat, enim, repudiandae error ullam laudantium asperiores?</span>
      <span>Ducimus unde cum iste, optio veritatis quas impedit quos sint recusandae quaerat labore odit eum quod perspiciatis molestias! Corporis facilis nisi doloribus quo esse a eos aperiam rerum suscipit iure.</span>
      <span>Laborum, libero consectetur quo beatae eveniet unde ab est accusantium dolorum corrupti possimus atque quam molestias maiores adipisci ipsam reprehenderit obcaecati similique nihil, in nulla cum. Vel repellat exercitationem quod.</span>
      <span>Quibusdam, ullam laboriosam deserunt consequuntur officiis et fugit? Nobis consequuntur voluptatum fuga alias, ratione hic nulla facilis delectus beatae ipsum! Facere asperiores aut architecto labore quam nemo obcaecati ea odio.</span>
      <span>Obcaecati, quasi fuga! Enim odio sit repudiandae iste hic corporis at animi odit, expedita iure esse optio debitis velit earum harum eum dolore. Laboriosam reprehenderit consectetur aut sequi, hic rerum.</span>
    </p>
    <p>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, sunt suscipit consequatur iusto vitae eaque molestias quasi fugiat placeat odit possimus pariatur recusandae officia, minus, expedita tempore! Doloremque, nulla esse.</span>
      <span>Similique officia minima distinctio voluptatum quod commodi, unde laboriosam doloremque mollitia totam iusto eius excepturi facilis deleniti neque quo dolores nam architecto minus rerum impedit obcaecati numquam assumenda consequatur! Deserunt?</span>
      <span>Temporibus corporis quas distinctio vero necessitatibus, provident quam libero, expedita reiciendis id consequuntur, nesciunt enim beatae at ab? Dolorum ab blanditiis, error sunt voluptatibus vel quasi quos officiis voluptatum culpa?</span>
      <span>Veniam dolorum dolores ratione aut consequuntur ipsum, maiores voluptates ab vitae. Dolor, iste quaerat fuga corporis rerum quae. Soluta, eos saepe molestias blanditiis qui neque repellat molestiae excepturi rem voluptas.</span>
      <span>Quam quos quia ab consequatur iusto fugit ea vitae, numquam odit iure, culpa veniam tempore omnis commodi praesentium. Explicabo beatae tenetur aliquid doloremque minus, veritatis ut eligendi perferendis illo neque!</span>
    </p>
  </div>
</use-rainbow>
              
            
!

CSS

              
                div {
  margin: 32px;
}

h2 {
  font-family: 'Comic Sans MS', sans-serif;
}

p {
  border: 3px solid var(--use-rainbow);
  transition: 1s border;
}
              
            
!

JS

              
                function ce(...args) {
  return document.createElement(...args);
}

class UseRainbow extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    
    this.scrollPosition = 0;
    
    this.hueOffset = 0;
    this.saturation = 100;
    this.lightness = 50;
    
    this.slotElement = ce('slot');
    this.shadowRoot.append(this.slotElement);
    console.log({slot: this.slotElement});
    
    this.styleElement = ce('style');
    this.updateStyle();
    this.shadowRoot.append(this.styleElement);
  }
  
  updateStyle() {
    this.styleElement.textContent = `
      :host {
        --use-rainbow-hue: ${this.hueOffset + this.scrollPosition}deg;
        --use-rainbow-saturation: ${this.saturation}%;
        --use-rainbow-lightness: ${this.lightness}%;
        --use-rainbow: hsl(var(--use-rainbow-hue), var(--use-rainbow-saturation), var(--use-rainbow-lightness));
      }
    `;
  }
  
  static get observedAttributes() {
    return [
      'hue',
      'saturation',
      'lightness'
    ];
  }
  
  attributeChangedCallback(name, previousValue, newValue) {
    if (name === 'hue') {
      this.hueOffset = parseInt(newValue);
    } else if (name === 'saturation') {
      this.saturation = parseInt(newValue);
    } else if (name === 'lightness') {
      this.lightness = parseInt(newValue);
    }
    
    this.updateStyle();
  }
  
  scrollHandler() {
    console.log(this.hueOffset, this.scrollPosition)
    const viewportHeight = window.innerHeight
    const contentHeight = document.body.getBoundingClientRect().height
    const viewportsPerRotation = Math.min(
      3,
      contentHeight / viewportHeight
    )
    const from = 0
    const progress =
      window.scrollY / (viewportHeight * viewportsPerRotation);
    const h = (from + 360 * progress) % 360;

    this.scrollPosition = h;
    this.updateStyle();
  }
  
  connectedCallback() {
    window.addEventListener(
      'scroll',
      this.scrollHandler.bind(this),
      { passive: true }
    )
  }
  
  disconnectedCallback() {
    window.removeEventListener('scroll', this.scrollHandler);
  }
}

window.customElements.define('use-rainbow', UseRainbow);
              
            
!
999px

Console