Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia itaque odit nobis molestias dolorem est vel quas quam autem, reiciendis at in libero nisi fugiat facere architecto. Quia, necessitatibus nostrum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi sunt dolore placeat, pariatur porro quibusdam inventore eveniet. Corrupti labore reprehenderit laborum saepe recusandae quia soluta voluptatibus voluptatum consectetur! Reiciendis, quisquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. In debitis corrupti qui quasi, suscipit ex aut! Excepturi eveniet rem ipsum, consectetur quo minus nobis quaerat accusantium adipisci deserunt, voluptatibus aspernatur?
Doloribus inventore nam quasi cupiditate tempore officiis fuga illo eos minima reiciendis itaque necessitatibus quidem blanditiis ab, natus quia, perferendis nulla? Necessitatibus consequuntur eius, perferendis aliquam vero alias enim quibusdam.
Quod magnam necessitatibus tempore error possimus saepe eveniet quis unde deleniti, aperiam nostrum ipsa vel blanditiis excepturi libero tenetur ab sint doloremque dignissimos. Repellendus magni porro eos a ex quisquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum id, provident autem, tempore dolore reiciendis rerum eius ab, quia odio accusantium assumenda. At rem tenetur quod voluptas minus, explicabo autem!
Nostrum, numquam ex facilis eum laboriosam quasi. Quos voluptas ex laudantium quasi modi esse fuga totam, cupiditate eius officia rerum quibusdam molestiae dolorum dignissimos ut neque debitis voluptatem? Eligendi, repudiandae.
Consectetur debitis voluptatem quae aliquam deleniti veniam accusantium autem praesentium, magnam, quas qui neque, odit aut doloremque magni natus eum. Omnis cumque doloribus repellendus veniam itaque ipsa voluptates corrupti sit.
Praesentium aspernatur expedita consectetur eligendi sapiente inventore, cumque facere neque consequatur eum eaque, doloremque ipsum tempore similique eveniet nulla quaerat, corporis iusto earum temporibus. Rerum reiciendis nemo esse fugit porro!
Harum velit, accusantium voluptate optio accusamus porro ipsa quos sit dolore itaque doloremque, nesciunt esse id similique, magnam labore non ab ut numquam ullam beatae? Excepturi illo nostrum sequi omnis!
Eligendi earum debitis molestias rem aspernatur. Laudantium assumenda accusamus, suscipit cumque natus officiis soluta consequuntur nemo quisquam delectus nobis architecto eum ducimus exercitationem quidem minima necessitatibus adipisci ipsum id harum.
Consectetur iste dolorum eaque maiores hic. Illo eius provident tenetur, veniam blanditiis ea rem amet eaque delectus qui nemo quod ipsa sint, id esse facere ratione sequi veritatis minus. Ducimus.
Mollitia impedit ullam esse ab tempora deleniti iusto nemo quasi magni ut culpa eligendi vero illum non ipsum modi cupiditate veritatis, vel eaque necessitatibus sequi aut sint labore doloremque! Itaque.
Assumenda enim porro distinctio quae voluptates eum ex tempore necessitatibus! Rem laboriosam perspiciatis officiis, quae a, fuga quo exercitationem eveniet voluptates deserunt assumenda alias, quas error velit sequi laborum aperiam?
Earum iure sed deleniti nulla voluptatem molestiae incidunt quam, aliquid repellendus distinctio. A, adipisci! Cum quisquam ullam expedita corrupti cumque natus, dolor ab vitae, magnam similique atque! Culpa, alias facilis.
Libero, voluptatibus minus! Architecto commodi in quia repellat tempora et iure dolorum amet dolor voluptates, fugiat recusandae consectetur minus veniam velit quae odio consequatur quo magnam nulla voluptatum maxime ab!
Veniam libero aspernatur sit sequi veritatis minima adipisci culpa facilis autem unde, nisi corporis quos quod reprehenderit sint quo repudiandae accusantium, ad tempora quis repellat eligendi vel nesciunt! Incidunt, itaque?
Quae possimus doloremque eveniet est aliquid, illo iusto omnis officia quia eligendi tenetur ratione ea expedita ut sequi delectus reiciendis odit magni nulla ex velit repudiandae nostrum, hic explicabo? Officiis.
Sunt accusamus sequi molestias doloribus similique dicta consequatur omnis ipsam quam libero qui consectetur facilis possimus at eveniet sint, tenetur recusandae ducimus quae ex ipsum eius. Magni eligendi repellat libero.
Cupiditate distinctio quibusdam unde voluptatum laborum vero maiores consectetur est incidunt quas ipsam accusamus itaque atque id quis tempore beatae nesciunt, non officia enim, deserunt impedit labore. Nostrum, enim ab.
Commodi similique temporibus tenetur doloremque distinctio illum vero? Sint rerum itaque, nostrum sed laborum magnam officiis, accusamus non, odit quaerat ea pariatur sunt saepe dignissimos. Distinctio ut consectetur fugit? Autem.
Perferendis deleniti quia blanditiis. Provident culpa rerum tempore aut iste deserunt magnam tenetur eaque sequi quidem, commodi iure sint doloribus deleniti ipsa maiores earum quasi possimus? Nam recusandae non quisquam.
Rerum maxime omnis error, reiciendis dolor autem et architecto. Laudantium debitis, dolore ipsam odio a, quia consequuntur sunt cupiditate voluptatum earum, dolores praesentium quae atque rem nulla. Alias, nihil asperiores.
Autem placeat magnam voluptatum omnis laboriosam doloribus consequuntur facilis dolor, aperiam perferendis blanditiis velit ex dolore corporis, a cum incidunt quo, quidem alias error sapiente aliquam dicta. Voluptatem, magnam saepe?
Consectetur dolores, voluptas inventore quaerat deleniti aspernatur numquam enim corporis ipsum rerum assumenda sint laborum vero fuga fugiat. Dicta expedita ducimus unde consequuntur quisquam autem aliquam blanditiis consequatur ullam ipsum.
Quas natus, enim a suscipit nulla recusandae omnis? Consectetur nam architecto officia amet. Neque debitis repellat aliquid rerum, cum voluptatibus quasi deleniti sit recusandae, excepturi quos voluptatum tempora saepe temporibus.
Cupiditate in rem, ad at eos natus magnam accusamus, a reprehenderit iusto earum perspiciatis, non voluptatem. Molestiae quia neque non vero dolor? Est, repellat! Ullam libero optio repellat repellendus eius.
Tempore qui laborum consequuntur suscipit animi corrupti exercitationem necessitatibus ipsam amet non architecto iste eius obcaecati excepturi nisi quos modi veritatis, iusto error explicabo doloremque quas dolor placeat. Beatae, quam.
Perferendis tempora fuga ad, distinctio corrupti exercitationem, at iure illo consectetur tenetur saepe quidem assumenda velit, dolore ratione laborum quo quasi doloremque asperiores numquam. Voluptatum provident quo numquam quos qui?
Dolore, hic nesciunt deserunt asperiores, adipisci quae voluptate reiciendis repellat, a illo vitae? Mollitia animi eaque velit sunt nemo explicabo quam voluptatibus, molestias in exercitationem, quia accusantium optio odio voluptatum.
Accusantium incidunt vero assumenda rem id, quam, sit, expedita quidem sequi suscipit repudiandae rerum animi alias. Veniam temporibus cumque quam dolores quisquam deserunt ipsa ab porro. Odio tempore sint libero!
Nobis non asperiores aperiam, velit incidunt rerum atque quos sit, expedita dicta eaque quod similique odit adipisci sequi praesentium sunt nesciunt minus sint culpa dolores animi quasi? Perferendis, iste ratione.
Minima illum labore numquam placeat enim? Molestias vel autem cum tempore soluta nobis earum? Sint, qui. Sint voluptatem voluptatibus culpa illo et. Nobis est ducimus distinctio, sapiente maxime praesentium maiores.
Magnam ex amet pariatur aut iusto quos eos accusantium officiis, possimus ducimus sint architecto nobis earum qui corporis inventore assumenda ea! Facilis voluptatibus aut repellat dolorum molestiae a facere provident!
Aliquid eligendi optio exercitationem suscipit aperiam saepe, atque, quasi quas, fuga reiciendis unde. Ea vero, inventore laboriosam explicabo deleniti sint dicta cupiditate, officia laudantium quidem sequi itaque nesciunt ex minima.
Voluptatum rem minima fugiat fuga repellendus dignissimos vero, ad provident. Error aut porro vero eaque soluta! Ex animi dicta aliquam non, aut modi error nemo! Facilis ad minus rem temporibus!
Possimus explicabo consequuntur molestias magni! Commodi libero veniam mollitia porro fugit excepturi laboriosam soluta nam, maxime, explicabo quam magni animi illo nulla molestiae! Voluptates unde nulla assumenda ut soluta placeat.
Dolor molestiae esse minus quis fugiat unde explicabo ex, animi eos ratione hic culpa illum alias, quo tempore reprehenderit quaerat nobis id maxime aperiam? Perferendis possimus facere debitis ea sit!
Iure aspernatur inventore veniam modi repudiandae asperiores repellat, est expedita velit delectus, atque laboriosam rerum voluptates placeat! Rerum alias blanditiis molestias soluta, corporis voluptatum, vero necessitatibus consequatur accusamus inventore laudantium.
Animi sunt repellendus facere vel ea fugiat sint. Qui aut, totam nobis quibusdam maiores, ea nostrum itaque vitae corporis officia assumenda voluptatum sed adipisci cum ipsum minus inventore neque? Dolorem.
Sunt corporis quas consectetur. Iste dolor ipsum doloribus laboriosam perspiciatis incidunt voluptatem vitae. Amet alias, dolorem temporibus facere id eaque repudiandae debitis sunt vel ducimus facilis sapiente ut inventore dignissimos?
Facilis perspiciatis rerum iure suscipit, mollitia assumenda illum iste non nulla sapiente quis tempore! Maxime aperiam saepe, eveniet et voluptatum quasi magnam nesciunt sint eius mollitia delectus molestias ratione? Laboriosam.
Labore quas, minus eveniet dignissimos aperiam accusantium id animi ab, voluptates iste nobis qui recusandae maxime enim distinctio ratione necessitatibus incidunt iure tempore mollitia quae est, voluptate non omnis. Quasi.
Ipsa facilis tempore hic incidunt corporis. Quae eaque minima fugit voluptatem nemo odio sint, voluptas quis rem sit, voluptate incidunt iusto autem fuga pariatur, nostrum voluptatum nulla repudiandae possimus aliquam!
Praesentium, harum repellat ad consequatur et fugit illum rerum eaque tempore aspernatur! Excepturi suscipit enim magni expedita optio laboriosam ducimus repellendus exercitationem harum reprehenderit, animi et minima perspiciatis nam eaque?
Illo earum veniam, ipsa corporis totam rerum aut quisquam recusandae maxime minus soluta doloremque, provident neque perspiciatis praesentium consectetur esse nisi. Tenetur doloremque fugiat quas blanditiis esse modi? Obcaecati, quaerat?
Soluta nostrum quidem provident praesentium, dolore cumque possimus ab eaque repellat culpa nesciunt. Qui, ex facere quidem repellat beatae velit nihil voluptas asperiores facilis sit est architecto labore tempore nobis.
Doloremque, qui sit illum aliquid nisi placeat minus corporis consequatur non odio distinctio repellendus eligendi quam labore at pariatur, provident ducimus? Sint quaerat corporis laborum nemo illum quas quam distinctio!

Voluptatum, deleniti odio, veritatis impedit odit aut doloremque sed eius modi velit accusantium. Aperiam voluptatibus sapiente quidem delectus ab earum nostrum sunt nesciunt est! Repudiandae nesciunt blanditiis velit consectetur vitae.
Dolore iure ullam similique debitis ipsum. Vero architecto dicta, expedita et repellendus maxime qui nisi dignissimos neque mollitia quaerat, doloremque eum porro ab distinctio consequuntur ratione similique sunt beatae saepe?
Rerum, ut dolorem! Ipsam rerum maxime incidunt, sequi asperiores ipsa quis voluptas, inventore a explicabo amet. Eligendi obcaecati sequi dolorem quos nisi, sapiente deleniti, voluptatem porro quaerat enim tenetur aliquid. </p>
!

CSS 

              
                body{
  background:#000;
  max-width:666px;
  margin:auto;
  font-family:courier,monospace;
  line-height:1.4;
}
span{
  animation:colorz 6s linear infinite alternate;
}

@keyframes colorz{
  0%{color:hsl(0,100%,50%)}
  100%{color:hsl(270,100%,50%)}
}
!

JS 

              
                var p = document.querySelector('p');
var text = p.textContent;
var newText = "";

for(var i = 0;i<text.length;i++){
  // version simple :
  // newText+="<span>"+text[i]+"</span>";
  // version ++
  var delay =  i*6+"ms"; 
  newText+="<span style='animation-delay:"+ delay + "'>"+text[i]+"</span>";
}

p.innerHTML = newText;
!
999px

Console