css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- Please ❤ this and follow me if you like it! -->




























<a class="group" id="page-wrap" href="https://pickjb.com/" target="_blank" rel="external noopener"><svg class="logo" xmlns="http://www.w3.org/2000/svg" width="102" height="96" viewBox="0 0 85 80" preserveAspectRatio="xMinYMin meet"><path d="M84.97 49.03c.1 2.14-.06 2.97-.1 3.25-.45 4.7-2.56 8.44-6.6 11-3.98 2.5-8.43 3.3-13.02 3.33-8.38.1-16.75.1-25.13.1h-1.05V1.4c0-.5-.06-.9-.1-1.38H65.1c.24.05.47.13.7.17 1.65.2 3.3.4 4.92.8 3.7.9 7.04 2.5 9.3 5.8 3.55 5.1 2.9 13.1-1.43 18-2.6 2.9-6 4.7-9.5 6.1l-2.6.9c.4.1.7.2.9.3 2.7 1.1 5.6 1.9 8.2 3.3 4.5 2.3 8.2 5.8 8.94 11M52.2 57.2c4.68-.1 9.3.15 13.8-1.4 1.83-.66 3.2-1.9 3.8-3.78 1.17-3.56.78-7-1.7-9.9-4.2-4.9-9.86-5.6-15.9-5.4v20.5zm.03-48v18.65c2.24-.14 4.42-.13 6.56-.45 6-.84 9.6-5.3 9.3-11.1-.2-3.66-1.7-5.5-5.3-6.36-3.5-.83-7.07-.7-10.6-.7zM0 68.53c.43.1.88.14 1.3.28C4.6 70 8 70.6 11.53 70.5c.9-.03 1.8-.12 2.66-.32 2.8-.64 4.3-2.64 4.7-5.37.3-2 .6-4.1.6-6.1V.1h14l-.1 1.25c0 18.4.05 36.8-.04 55.2 0 3.2-.38 6.44-.94 9.6-.7 3.8-2.3 7.25-5.4 9.8-2.6 2.08-5.63 3.13-8.86 3.64-1.54.2-3.12.3-4.7.5h-2.9c-1.14-.14-2.3-.2-3.46-.4-2.36-.38-4.7-.8-7.12-1.2"/></svg><div id="inner-wrap"><svg class="waves" xmlns="http://www.w3.org/2000/svg" width="1440" height="321.75" viewBox="0 0 960 214.5" preserveAspectRatio="xMinYMid meet"><defs><style>.waves>path{-webkit-animation:a 17390ms ease-in-out infinite alternate-reverse both;-moz-animation:a 17390ms ease-in-out infinite alternate-reverse both;-ms-animation:a 17390ms ease-in-out infinite alternate-reverse both;-o-animation:a 17390ms ease-in-out infinite alternate-reverse both;animation:a 17390ms ease-in-out infinite alternate-reverse both;-webkit-animation-timing-function:cubic-bezier(.25,0,.75,1);-moz-animation-timing-function:cubic-bezier(.25,0,.75,1);-ms-animation-timing-function:cubic-bezier(.25,0,.75,1);-o-animation-timing-function:cubic-bezier(.25,0,.75,1);animation-timing-function:cubic-bezier(.25,0,.75,1);-webkit-will-change:transform;-moz-will-change:transform;-ms-will-change:transform;-o-will-change:transform;will-change:transform}.waves>path:nth-of-type(1){-webkit-animation-duration:20580ms;-moz-animation-duration:20580ms;-ms-animation-duration:20580ms;-o-animation-duration:20580ms;animation-duration:20580ms}.waves>path:nth-of-type(2){-webkit-animation-delay:-2690ms;-moz-animation-delay:-2690ms;-ms-animation-delay:-2690ms;-o-animation-delay:-2690ms;animation-delay:-2690ms;-webkit-animation-duration:13580ms;-moz-animation-duration:13580ms;-ms-animation-duration:13580ms;-o-animation-duration:13580ms;animation-duration:13580ms}g>path:nth-of-type(1){-webkit-animation-delay:-820ms;-moz-animation-delay:-820ms;-ms-animation-delay:-820ms;-o-animation-delay:-820ms;animation-delay:-820ms;-webkit-animation-duration:10730ms;-moz-animation-duration:10730ms;-ms-animation-duration:10730ms;-o-animation-duration:10730ms;animation-duration:10730ms}.waves>path:nth-of-type(1),g>path:nth-of-type(2){-webkit-animation-direction:alternate;-moz-animation-direction:alternate;-ms-animation-direction:alternate;-o-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes a{0%{-webkit-transform:translateX(-750px);transform:translateX(-750px)}100%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@-moz-keyframes a{0%{-moz-transform:translateX(-750px);transform:translateX(-750px)}100%{-moz-transform:translateX(-20px);transform:translateX(-20px)}}@-ms-keyframes a{0%{-ms-transform:translateX(-750px);transform:translateX(-750px)}100%{-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-o-keyframes a{0%{-o-transform:translateX(-750px);transform:translateX(-750px)}100%{-o-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes a{0%{-webkit-transform:translateX(-750px);-moz-transform:translateX(-750px);-ms-transform:translateX(-750px);-o-transform:translateX(-750px);transform:translateX(-750px)}100%{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px)}}</style><linearGradient id="a"><stop stop-color="#00A8DE"/><stop offset="0.2" stop-color="#333391"/><stop offset="0.4" stop-color="#E91388"/><stop offset="0.6" stop-color="#EB2D2E"/></linearGradient></defs><path fill="url(#a)" d="M2662.6 1S2532 41.2 2435 40.2c-19.6-.2-37.3-1.3-53.5-2.8 0 0-421.3-59.4-541-28.6-119.8 30.6-206.2 75.7-391 73.3-198.8-2-225.3-15-370.2-50-145-35-218 37-373.3 36-19.6 0-37.5-1-53.7-3 0 0-282.7-36-373.4-38C139 26 75 46-1 46v106c17-1.4 20-2.3 37.6-1.2 130.6 8.4 210 56.3 287 62.4 77 6 262-25 329.3-23.6 67 1.4 107 22.6 193 23.4 155 1.5 249-71 380-62.5 130 8.5 209 56.3 287 62.5 77 6 126-18 188-18 61.4 0 247-38 307.4-46 159.3-20 281.2 29 348.4 30 67 2 132.2 6 217.4 7 39.3 0 87-11 87-11V1z"/><path fill="#F2F5F5" d="M2663.6 73.2S2577 92 2529 89c-130.7-8.5-209.5-56.3-286.7-62.4s-125.7 18-188.3 18c-5 0-10-.4-14.5-.7-52-5-149.2-43-220.7-39-31.7 2-64 14-96.4 30-160.4 80-230.2-5.6-340.4-18-110-12-146.6 20-274 36S820.4 0 605.8 0C450.8 0 356 71 225.2 62.2 128 56 60.7 28-.3 11.2V104c22 7.3 46 14.2 70.4 16.7 110 12.3 147-19.3 275-35.5s350 39.8 369 43c27 4.3 59 8 94 10 13 .5 26 1 39 1 156 2 250-70.3 381-62 130.5 8.2 209.5 56.3 286.7 62 77 6.4 125.8-18 188.3-17.5 5 0 10 .2 14.3.6 52 5 145 49.5 220.7 38.2 32-5 64-15 96.6-31 160.5-79.4 230.3 6 340 18.4 110 12 146.3-20 273.7-36l15.5-2V73l1-.5z"/><g fill="none" stroke="#E2E9E9" stroke-width="1"><path d="M0 51.4c3.4.6 7.7 1.4 11 2.3 133.2 34 224.3 34 308.6 34 110.2 0 116.7 36.6 229.8 26 113-11 128.7-44 222-42.6C865 73 889 38 1002 27c113-10.8 119.6 25.6 229.8 25.6 84.4 0 175.4 0 308.6 34 133 34.2 277-73 379.4-84.3 204-22.5 283.6 128.7 283.6 128.7"/><path d="M0 6C115.7-6 198.3 76.6 308 76.6c109.6 0 131.8-20 223-28.3 114.3-10.2 238.2 0 238.2 0s124 10.2 238.3 0c91-8.2 113.2-28 223-28S1425 103 1541 91c115.8-11.8 153.3-69 269.3-84.6 116-15.5 198.4 71 308 71 109.8 0 131.8-20 223-28 114-10.2 237.7 0 237.7 0s37.4 2.4 82.8 3.7"/></g></svg><svg class="text" xmlns="http://www.w3.org/2000/svg" width="1440" height="321.75" viewBox="0 0 1440 321.8" preserveAspectRatio="xMidYMid meet" aria-label="Hello, World!"><path d="M240.8 223h-33v-53.4H151V223h-33.2V88H151v52.5h56.8V88.1h33V223zM363.2 180.7H289c1.3 6 4 10.6 7.8 14.2 4 3.6 8.6 5.3 14 5.3 10 0 17.2-3.9 21.5-11.6l28.6 5.8a48.4 48.4 0 0 1-27.3 27.6 59.7 59.7 0 0 1-43.3.2 49.6 49.6 0 0 1-28.8-28.2 56.2 56.2 0 0 1-4.1-21.6c0-7.6 1.4-14.7 4.1-21.4a49.8 49.8 0 0 1 28.9-28.2 55 55 0 0 1 40.5-.2 49 49 0 0 1 27.8 28 60 60 0 0 1 4.4 21.8v8.3zM298 149.4c-4 2.9-6.8 6.7-8.3 11.6h41.7c-1.5-5.1-4-9-7.8-11.8-3.7-2.8-7.9-4.1-12.6-4.1s-9 1.4-13 4.3zM379.7 223V78h32.2v145h-32.2zM435 223V78h32.3v145H435zM557 121.8c6.2 1.7 12.4 5 18.8 9.8 6.3 4.8 11 11 14.4 18.3a54.9 54.9 0 0 1 .6 44c-3 6.6-7 12.3-12.1 17.1a59 59 0 0 1-56.6 12.3c-6.2-1.7-12.5-5-19-9.8-6.3-4.8-11.1-11-14.4-18.4a55.2 55.2 0 0 1-.6-44c2.9-6.6 6.9-12.2 12-17a54.2 54.2 0 0 1 18-11 61.2 61.2 0 0 1 39-1.3zm-7.2 74.4a26 26 0 0 0 14.3-23.8c0-7.5-2.5-13.7-7.4-18.7s-10.5-7.4-17-7.4c-4 0-8 1-12 3.2-4 2.1-7.2 5.3-9.5 9.6a27.8 27.8 0 0 0 .9 28.2 23 23 0 0 0 10.2 8.9c3.8 1.6 7.3 2.4 10.4 2.4 3 0 6.3-.8 10-2.4zM595 249.6l12-58h35.6v.8l-23.2 57.2h-24.3zM850.1 223h-35.6L792 139.6 769.2 223h-35.4L695.3 88h34l23.6 85 23.2-85h31.6l23.1 85 23.6-85h34.2L850 223zM958.9 121.8c6.1 1.7 12.4 5 18.7 9.8 6.3 4.8 11 11 14.4 18.3a54.9 54.9 0 0 1 .6 44c-3 6.6-7 12.3-12.1 17.1a59 59 0 0 1-56.6 12.3c-6.2-1.7-12.5-5-18.9-9.8s-11.2-11-14.5-18.4a55.6 55.6 0 0 1-.6-44c2.9-6.6 7-12.2 12-17a54.2 54.2 0 0 1 18.1-11 61.2 61.2 0 0 1 38.9-1.3zm-7.3 74.4a26 26 0 0 0 14.3-23.8c0-7.5-2.4-13.7-7.3-18.7-5-5-10.6-7.4-17-7.4-4 0-8.1 1-12.1 3.2-4 2.1-7.2 5.3-9.5 9.6a27.8 27.8 0 0 0 1 28.2 23 23 0 0 0 10 8.9c4 1.6 7.5 2.4 10.5 2.4s6.3-.8 10.1-2.4zM1087.7 121.3l-1.4 32.2h-5.9c-23.2 0-34.8 12.6-34.8 37.9V223h-32.2V122h32.2v19.2c2.8-4.5 6.2-8.5 10-11.8a33 33 0 0 1 12.6-7c4.4-1.2 8.5-1.9 12.2-1.9 2.7 0 5.1.3 7.3.8zM1101.2 223V78h32.2v145h-32.2zM1262.8 223h-32.2v-8a45.1 45.1 0 0 1-31.4 11 48.2 48.2 0 0 1-45.4-32 58.8 58.8 0 0 1-2.6-34 52.4 52.4 0 0 1 14.2-27 46.8 46.8 0 0 1 33.8-14c12.8-.1 23.2 3.6 31.4 11V78h32.2v145zm-46.6-26.8c3.9-1.6 7.2-4.6 10-9s4.4-9.2 4.4-14.7c0-7.6-2.4-13.8-7.3-18.8-5-5-10.7-7.4-17.4-7.4-5.1 0-9.7 1.4-13.7 4.2s-6.8 6.3-8.4 10.4c-1.5 4-2.3 8-2.3 11.6s.8 7.5 2.3 11.6a23.7 23.7 0 0 0 32.4 12zM1317.7 193.7c3.5 3.5 5.3 7.7 5.3 12.6 0 5-1.7 9.1-5.2 12.6a18 18 0 0 1-13 5c-5.5 0-9.9-1.6-13.4-5a17 17 0 0 1-5.2-12.6c0-4.9 1.8-9 5.3-12.6s8-5.3 13.2-5.3c5.1 0 9.4 1.7 13 5.3zm4.5-99.4l-2 82.6h-31.8l-2-82.6v-6.2h35.8v6.2z"/></svg></div></a>



<!-- Code added to every pen -->
<div class="credits"><a class="other-pens" href="https://codepen.io/PickJBennett/" target="_blank" rel="external noopener"><svg class="credits-logo codepen-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="0" height="0"><path d="M255.8 87.1c-.05-.32-.1-.63-.2-.94-.04-.18-.1-.35-.16-.53-.08-.27-.17-.54-.28-.8l-.25-.54c-.1-.3-.2-.5-.3-.8l-.3-.5-.4-.7-.4-.5-.5-.6-.4-.5-.6-.5-.5-.4c-.03-.1-.1-.1-.2-.2l-117-78c-3.7-2.5-8.5-2.5-12.2 0L5 79.7c-.06.04-.1.1-.17.13l-.5.36-.63.5-.48.4c-.2.2-.4.4-.55.6l-.37.5-.45.6-.32.5c-.14.26-.26.5-.37.75l-.25.52c-.1.23-.2.5-.2.8l-.2.6c-.1.3-.15.6-.2.9l-.1.47c-.1.5-.1.95-.1 1.44v78c0 .5 0 1 .1 1.46l.1.48c.07.3.1.62.2.93l.2.5c.08.3.17.6.27.8l.25.53.4.73.3.5c.1.23.3.44.5.65l.3.46c.2.2.3.4.5.6.2.15.3.3.5.4l.6.55.5.4.15.18 116.95 78c1.84 1.25 3.95 1.87 6.1 1.86 2.13 0 4.24-.63 6.1-1.86l117-78c.1-.05.1-.1.2-.15l.5-.37.6-.5c.15-.1.3-.27.44-.4.2-.2.4-.4.57-.6.16-.17.3-.3.4-.5.18-.2.34-.4.48-.65l.3-.5.36-.76c.1-.14.14-.3.22-.5l.3-.8.15-.53c.1-.3.12-.6.2-.9 0-.2.05-.34.1-.5.04-.5.1-.95.1-1.44V89c0-.5-.07-.96-.1-1.44 0-.17-.1-.3-.1-.47zM128 154l-38.9-26 38.9-26.02L166.9 128 128 154.02zm-11-71.15l-47.7 31.9L30.8 89 117 31.57v51.3zM49.52 128l-27.5 18.4v-36.8L49.5 128zm19.8 13.24l47.68 31.9v51.3L30.8 167l38.5-25.74zm69.68 31.9l47.7-31.9 38.5 25.74-86.2 57.46v-51.3zM206.47 128L234 109.6v36.8L206.46 128zm-19.78-13.23L139 82.87v-51.3L225.2 89l-38.5 25.77z"/></svg>Check out my other pens</a> <a id="js-tweet-this" href="https://twitter.com/PickJBennett" target="_blank" rel="external noopener"><svg class="credits-logo twitter-logo" id="js-twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.39 222.18" width="0" height="0"><path d="M273.4 26.3c-10.07 4.46-20.88 7.48-32.22 8.83 11.58-6.94 20.47-17.93 24.66-31.03C255 10.53 243 15.2 230.22 17.7 220 6.8 205.42 0 189.28 0c-30.98 0-56.1 25.1-56.1 56.1 0 4.38.5 8.66 1.46 12.77-46.6-2.34-87.94-24.67-115.6-58.6-4.84 8.28-7.6 17.92-7.6 28.2 0 19.45 9.9 36.62 24.95 46.68-9.2-.3-17.85-2.8-25.41-7.02-.02.24-.02.47-.02.7 0 27.2 19.33 49.86 45 55-4.7 1.3-9.67 1.98-14.78 1.98-3.62 0-7.13-.35-10.56-1 7.14 22.28 27.85 38.5 52.4 38.95-19.2 15.05-43.38 24-69.66 24-4.53 0-9-.25-13.38-.77 24.82 15.9 54.3 25.2 85.98 25.2 103.17 0 159.6-85.47 159.6-159.6 0-2.42-.07-4.84-.18-7.24 10.96-7.9 20.47-17.8 28-29.04z"/></svg></a></div>
            
          
!
            
              /* Please ❤ this and follow me if you like it! */




























:root {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

*,
:before,
:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-ms-box-sizing: inherit;
	-o-box-sizing: inherit;
	box-sizing: inherit;
}

html, body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

html {
	overflow: hidden;
}

body {
	margin: 0;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-ms-overflow-scrolling: touch;
	-o-overflow-scrolling: touch;
	overflow-scrolling: touch;
	-ms-overflow-style: ms-autohiding-scrollbar;
}

#page-wrap {
	position: relative;
	display: block;
	clear: both;
	background: none;
	color: #000;
	text-decoration: none;
	padding: 3rem 0;
	width: 100%;
	height: 100%;
}

#inner-wrap {
	position: absolute;
	top: 3rem;
	left: 0;
	right: 0;
	bottom: 3rem;
	display: table;
	width: 100%;
	height: 100%;
	min-height: 322px;
	overflow: visible;
}

.logo {
	position: absolute;
	z-index: 1;
	top: 3rem;
	left: 2rem;
	display: block;
	width: 9vmax;
	height: 9vmax;
	min-width: 50px;
	min-height: 50px;
}

.waves {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	min-width: 100%;
	min-height: 70%;
	margin: auto 0;
}

.text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 83%;
	height: 100%;
	margin: auto;
}

img, svg {
	display: block;
	overflow: visible;
	pointer-events: none;
}

.group:before,
.group:after {
  content: "";
  display: table;
  clear: both;
}
.group {
  zoom: 1;
}





.credits {
	position: relative;
	z-index: 9;
	font-size: 130%;
	text-align: center;
	width: 100%;
	padding: 2rem 0;
}

.credits a {
	display: inline-block;
	color: #df1888;
	font-family: Arial, sans-serif;
	line-height: 1.5em;
	text-decoration: none !important;
	white-space: nowrap;
	margin: 0 1.2em;
	padding: 0.6em 0;
	transition: 150ms;
}

.credits a:hover {
	color: #2d71b9;
	cursor: pointer;
}

.credits-logo {
	fill: currentColor;
	display: inline-block;
	vertical-align: bottom;
	width: 1.6em;
	height: 1.6em;
	margin: 0 0.5em 0 0;
}

            
          
!
            
              /* Please ❤ this and follow me if you like it! */




























// Working with credits

var cpCreditsUrl = "https://codepen.io/PickJBennett/details/BdbrMW";
var cpCreditsTitle = "🌈 Sexy Animated Rainbow Waves Header";
var cpCreditsTwitter = document.getElementById("js-tweet-this");
cpCreditsTwitter.href = "https://twitter.com/intent/tweet?text=" + encodeURI(cpCreditsTitle) + "&url=" + encodeURI(cpCreditsUrl) + "&via=PickJBennett&related=PickJBennett,CiaoFileManager";
cpCreditsTwitter.innerHTML += "Tweet This Pen";
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console