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

              
                <p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam possimus, neque, adipisci aperiam illo accusantium excepturi, maiores aspernatur repudiandae laboriosam expedita? Veritatis aut corporis nesciunt dolorem, incidunt exercitationem ad tempore! Hic cupiditate commodi ratione reiciendis facilis optio aliquam dolor ducimus. Eligendi fugit et, blanditiis provident sed dolore iusto exercitationem, ex dolor rem aspernatur nulla fugiat eos earum, facere doloribus aliquid a vel temporibus quidem maiores nisi molestiae doloremque hic. Repellat iste ad perspiciatis fuga! Cumque quas consequatur eligendi id laborum temporibus sed laudantium illo ex ipsam dolorum adipisci, accusamus mollitia corporis! Porro magnam laborum eius unde voluptatem, recusandae sit, dolorum qui deleniti voluptas voluptatibus tenetur molestiae quos harum ullam? Tempore aliquid minima quis animi eveniet possimus aliquam eius harum quia, quibusdam rem repudiandae molestiae labore praesentium. Necessitatibus, sed maxime. Cupiditate culpa sint dolor perspiciatis, id optio soluta fuga obcaecati suscipit ratione quaerat vitae itaque! Quibusdam possimus et repellat voluptatem culpa optio incidunt quisquam est earum corrupti nostrum amet beatae vel, atque quasi quaerat hic animi enim odit iste voluptas assumenda ab. Eveniet, aperiam consequuntur eos eius consectetur officiis beatae earum quo esse, nam fugiat, mollitia quibusdam quis ad a sapiente consequatur quaerat! Aperiam dolorem laborum harum inventore eos facilis voluptatibus aut distinctio? Aut vel, voluptates laudantium fugiat minima soluta cum libero nobis voluptas, facere facilis eos quasi, asperiores veritatis aliquid. Placeat similique facere ipsum, quaerat facilis, consectetur laudantium eius dolores perferendis fuga blanditiis ab voluptatem aliquid quas tenetur quod praesentium rerum expedita! Quas at mollitia sequi architecto alias possimus saepe placeat sint nemo, cupiditate impedit explicabo officiis tempore, quasi deleniti nostrum est ratione quibusdam assumenda temporibus omnis. Sequi, sapiente esse? Aut nam repudiandae amet eum illum beatae dolorum quos asperiores pariatur nulla incidunt quasi assumenda porro optio excepturi, minima, veritatis quibusdam, dicta accusantium explicabo iusto sapiente nihil maiores accusamus. Optio, consequuntur. Quae fugit ratione fuga sunt, ab iste, soluta pariatur exercitationem possimus, asperiores dolor libero quia minima. Ipsum nobis totam libero. Quidem vel blanditiis recusandae accusamus impedit, iste quo fuga vero enim, illum neque ut provident, distinctio doloribus sit exercitationem dolore ex. Expedita corporis aspernatur perferendis. Accusantium delectus modi ipsum maxime similique animi soluta quo deserunt consequatur? Magni, enim? Quo delectus quaerat sed! Praesentium dolore officia eaque accusamus eum ipsa accusantium in culpa tempora explicabo possimus maxime natus ut quibusdam voluptates iusto labore, numquam blanditiis quasi. Quibusdam nostrum fuga excepturi architecto, saepe omnis delectus inventore accusantium eius eos consequatur officia laudantium dolor aliquam. Rem iste veritatis explicabo odit quibusdam temporibus laborum aliquid itaque. Voluptatibus, quasi. Corporis ab non possimus earum, totam consequuntur! Corrupti, voluptates veniam nobis unde in nostrum architecto ducimus voluptatum minima numquam odio mollitia a iste ad fuga? Quod dolorem officiis, corrupti nulla cumque quas? Minus debitis ut dignissimos autem dolor necessitatibus unde, ducimus, explicabo veritatis totam reiciendis pariatur nesciunt quasi accusamus eveniet magni neque obcaecati inventore consequatur quibusdam quia? Atque fugiat doloribus veniam eius aut recusandae beatae aspernatur quasi corporis quas animi a totam deserunt, quisquam vitae quam dicta labore, sed optio nobis cum exercitationem pariatur. Deleniti doloribus provident harum quia repellendus neque eaque, debitis, accusamus alias fugit deserunt culpa asperiores maiores illo quo, sunt vero porro. Consequatur asperiores reprehenderit voluptatem neque inventore dolorum est dignissimos ab voluptates praesentium saepe beatae, perspiciatis velit voluptate ipsam nemo repellendus quos necessitatibus. Nostrum iusto consequatur corporis, accusantium alias cumque, tempore quibusdam voluptatem consectetur maiores ipsum tenetur, provident culpa esse blanditiis eligendi labore nulla nihil? Consequuntur, minus id voluptates similique nam assumenda adipisci vel, eaque a alias libero pariatur voluptatem dicta nihil omnis, ullam iure. Voluptatem iure possimus voluptas! Ipsa delectus nemo expedita quibusdam vel nulla molestiae doloribus culpa ex natus doloremque animi quos voluptate nesciunt, quam impedit dolorem dolor atque voluptatem accusantium veritatis iure cumque non. At quia magnam, mollitia earum aliquam necessitatibus enim corrupti eum cum suscipit. Vero officia cupiditate vel. Dolorum nisi ad et voluptatibus vel corporis culpa sint quidem, dicta dolore illum est suscipit cum saepe! Cupiditate illo, numquam ea illum quasi blanditiis impedit omnis quidem voluptatibus, unde expedita atque nihil, corrupti tempora aperiam doloremque nulla harum asperiores sequi vel est. Possimus vitae quibusdam autem ut, excepturi animi. Perferendis illo deserunt, iusto officia, nemo iure dolorum obcaecati sint nisi ullam adipisci esse exercitationem nesciunt provident explicabo quas, excepturi ex voluptas. Voluptas, nesciunt, eos impedit necessitatibus, odio iste quo architecto neque rerum excepturi consequatur dolor nisi labore sunt optio repudiandae corporis. Necessitatibus, cum facilis aperiam labore reiciendis, debitis molestiae, repellat dolorum veniam ipsam perferendis quibusdam nobis ipsum dignissimos! Ratione alias beatae similique rerum totam atque dolorum dolores doloremque unde velit distinctio quod tenetur possimus, officia saepe natus. Illo officia esse sed unde minus, minima, explicabo rem officiis eum nulla quo? Sint sed corrupti ut totam excepturi! Eveniet ut explicabo a odio incidunt? Sint ratione impedit exercitationem nam repudiandae perspiciatis odit alias ex cupiditate quibusdam omnis eius iure consequuntur officia, possimus ullam rem hic amet dolores praesentium excepturi doloribus eos tempora. Asperiores at temporibus molestias, ipsa dicta repellat facere inventore atque tempore impedit? Fugiat in alias eum beatae eos, quisquam molestiae repellendus veniam iure quis debitis totam ad nulla magni consequatur adipisci maxime dignissimos officiis voluptates corrupti veritatis voluptatum. Odio, amet. Repellendus, veritatis qui magni perspiciatis, tenetur consectetur cum praesentium vero sit, quod dicta ex. Odit explicabo nobis nostrum ad, dolores voluptas mollitia asperiores earum magni sint doloribus, vel tempore voluptatum corrupti, totam aspernatur debitis aliquid non. Temporibus, eligendi. Enim modi id doloribus deleniti laborum iusto accusamus, ipsa doloremque maxime quod animi delectus, consectetur mollitia incidunt, sed commodi expedita magnam ad quisquam fuga fugiat cupiditate nam facere cumque. Qui laborum saepe molestias. Amet porro necessitatibus, neque minima corporis mollitia ab non accusamus nobis illo ea sequi? Quibusdam deleniti delectus, iste perferendis dignissimos ratione mollitia perspiciatis optio error tempora quo? Fugiat molestiae expedita similique aut ea eligendi doloremque fugit, accusamus ab amet culpa voluptate velit reiciendis quia recusandae ducimus deserunt inventore, laboriosam adipisci tempore soluta saepe, blanditiis possimus dolor. Sint nam animi nobis reiciendis ex labore earum recusandae, doloremque consequuntur quidem pariatur maxime, optio ut alias molestias? Quia, ipsum quos!</p>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

p {
  font-family: 'Poppins', sans-serif;
  line-height: 14px;
  background: /*url("https://raghsonline.com/Raghs-Twitter-Pic.jpg");*/
url("https://raghsonline.com/Raghs.jpg");  
  -webkit-background-clip: text;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  background-size: 70vh;
  background-position: center;
}

body {
  background: black;
  overflow: hidden;
}
              
            
!

JS

              
                
              
            
!
999px

Console