cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="ele1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ratione quidem nobis, iste voluptatibus nostrum, quas vitae adipisci dignissimos velit delectus animi vero dolore est, eos nemo odit fugiat non eaque tempore accusamus. Placeat expedita reiciendis, necessitatibus asperiores explicabo ipsam sed esse dolorem! Temporibus autem vel quidem ipsum, neque, eaque natus sed, assumenda officia hic, debitis. Reiciendis dolorum voluptates aliquam, praesentium a reprehenderit tempora. Sequi maiores magnam obcaecati iusto quidem necessitatibus veritatis excepturi facere natus, esse cupiditate voluptates praesentium molestiae optio dolores inventore officia in, quam a tenetur suscipit assumenda quas sint. Deserunt nam maxime delectus quia, corrupti adipisci nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi unde cum fugiat repellendus amet. Rem consectetur cum, mollitia est! Quod, expedita eos fugit eligendi vero omnis quibusdam corporis mollitia consequatur et ex, deserunt aliquam doloremque iure praesentium tenetur odio voluptate rerum ipsum aut nobis molestias? Ad delectus vitae, excepturi laborum veniam omnis error, accusantium minima? Distinctio repellendus fuga molestiae, quidem blanditiis amet rem quam libero, exercitationem quod tempore ad suscipit aspernatur sed fugit? Blanditiis rem harum, doloremque a quaerat, quas est eum saepe neque praesentium laborum. Eveniet officia, eius dolor consequatur obcaecati odit magni earum, debitis mollitia. Corporis, enim harum maiores. Dignissimos cum nam amet consequuntur rerum omnis saepe ipsa, totam impedit at, suscipit? Aliquam accusamus, aut dolor sit possimus ipsum impedit, provident officia quaerat voluptatem laboriosam numquam voluptas dolorem neque quod similique, alias quia dolore quis explicabo ratione repellendus saepe deserunt. Eaque accusamus dignissimos minima debitis. Debitis magnam illum voluptate, et. Optio ipsa quis itaque eaque iste sunt voluptatem quaerat asperiores minus consectetur repudiandae dolore quibusdam vitae, ea sequi consequatur labore accusamus quidem, quia nemo officiis maiores. Dolores accusantium nesciunt unde beatae architecto ea quidem perferendis officia reprehenderit eaque. Animi velit, sapiente nesciunt exercitationem perferendis vitae. Perferendis, corporis, laboriosam cum dolorem repellendus iure consequatur. Facilis perferendis perspiciatis necessitatibus autem repellendus distinctio iste, architecto atque. Eos hic recusandae magnam, perspiciatis maxime obcaecati ut a numquam. Illum ea cumque cum sequi voluptate magnam iste soluta nesciunt quia est cupiditate tenetur ut quos numquam aliquid, modi libero laborum hic eum, iusto consequuntur neque vel. Reiciendis aspernatur, distinctio autem modi at incidunt fuga eveniet error fugit, consectetur repellendus quibusdam. Dignissimos totam ab nisi quas numquam. Officia error, nemo aut odio nobis quasi illo numquam! Laudantium autem, ex adipisci modi. Odit corporis nostrum repudiandae reiciendis omnis quaerat! Dolore fuga delectus unde tempora eius suscipit commodi ipsam quaerat! Numquam magni praesentium dolorum, recusandae eum veritatis, provident, reprehenderit ipsum perspiciatis explicabo error! Consequatur labore impedit odio voluptatibus soluta tenetur repellendus dolorum beatae, tempora fugiat quibusdam aspernatur. Nisi eaque facere obcaecati minima sunt adipisci, nam explicabo. Temporibus aliquam dolorum cumque, mollitia, autem, deleniti, libero vero nihil vel omnis facilis provident incidunt laborum dolor velit quod. Ea deserunt qui, rem. Minus repudiandae temporibus laborum animi sint nesciunt, praesentium mollitia vel, accusantium necessitatibus quaerat explicabo nostrum, ducimus in repellat rerum aliquid incidunt provident ex! Amet, dolore placeat deserunt repellat velit error incidunt, molestias ex mollitia blanditiis perferendis distinctio nemo. Ducimus necessitatibus ipsa repellendus provident ratione dignissimos voluptatibus sit, mollitia iure corporis aperiam voluptate, porro, possimus ad distinctio sequi atque totam, impedit natus quibusdam veniam libero alias hic quos minima. Nostrum quia, provident aliquid debitis eveniet aliquam laborum, voluptas illo sit incidunt, voluptates odio suscipit vel natus? Architecto impedit ex aspernatur, alias, asperiores nulla praesentium sapiente ad perspiciatis voluptatem libero obcaecati est esse totam recusandae deleniti suscipit et a molestias quo similique in, sint quasi officia? Repellendus aut dignissimos rerum perspiciatis, qui? Repudiandae delectus veritatis numquam. Nam ab aperiam nostrum fuga nihil quo quis itaque ipsam veritatis delectus. Ex.</div>

            
          
!
            
              .ele1
	width: 200px
	background: linear-gradient(#05FBFF, #1D62F0 ) top


            
          
!
            
              $("html")
	.velocity("scroll",
		{
			offset: 4000,
			duration: 8000
		});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console