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 esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM 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

Auto Save

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 

              
                    <div class="container">
        <div id="stars"></div>
        <div id="stars2"></div>
        <div id="stars3"></div>
        <div id="stars4"></div>
        <div class="waterlayer_q"></div>
        <div class="waterlayer_w"></div>
        <div class="waterlayer_e"></div>
        <div class="waterlayer_r"></div>
        <div class="waterlayer_a"></div>
        <div class="waterlayer_b"></div>
        <div class="waterlayer_c"></div>
        <div class="time">22:20</div>
    </div>
!

CSS 

              
                .time{
    width: 400px;
    height: 200px;
    font-size: 150px;
    text-align: center;
    font-family: cursive;
    color: #f0f6f9;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.container{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: #1f7ad0;
  background: linear-gradient(to bottom, #e74d5c 0%, #f3774d 100%);
}

.waterlayer_w{
    width: 500px;
    height: 500px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background-color: #ffb058;
}

.waterlayer_q {
    width: 580px;
    height: 580px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background-color: rgba(255, 176, 88, 0.3);
}

#stars3 {
    width: 660px;
    height: 660px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background-color: rgba(255, 176, 88, 0.2);
}

#stars2 {
    width: 740px;
    height: 740px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background-color: rgba(255, 176, 88, 0.2);
}

#stars{
    width: 820px;
    height: 820px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background-color: rgba(255, 176, 88, 0.1);
}


.waterlayer_c{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: 0 0/contain repeat-x;
  transition: background-position 0.3s ease-in-out;
  animation-name: mountain-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 125px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='690' height='125' viewBox='0 0 690 125' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 74.5C38.003 88.112 70.189 89.399 109.946 89C130.757 88.791 157.729 64.097 195.947 66C215.154 66.956 217.722 84.794 236.946 73C317.872 23.354 316.602 66.479 360.946 58C393.745 51.729 439.301 9.89999 478.947 0.999995C489.167 -1.29401 502.223 17.905 509.946 20C525.865 24.319 530.001 21.684 533.946 20C543.636 15.865 573.642 2.24799 600.946 14C619.81 22.119 630.99 42.407 642.946 52C655.724 62.252 672.003 70.2102 690 74.6562V125H0V74.5Z' fill='url(%23paint0_linear)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='0' y1='125' x2='0' y2='0' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%231E234A'/%3e%3cstop offset='1' stop-color='%23404A9A'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
  background-position-y: 40px;
  animation-duration: 5s;
}

.waterlayer_b{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: 0 0/contain repeat-x;
  transition: background-position 0.3s ease-in-out;
  animation-name: mountain-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 153px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='690' height='153' viewBox='0 0 690 153' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40C17.38 35.843 28.757 20.074 44.946 15C55.894 11.569 50.619 0.114991 82.796 0.897991C95.925 1.21799 112.769 17.775 125.946 17C137.969 16.293 149.719 5.853 160.946 6C168.257 6.096 174.523 0.189997 181.651 0.234997C216.168 0.453997 198.862 22.899 287.946 25C302.61 25.346 327.396 13.403 355.946 14C379.62 14.495 406.33 27.515 427.946 28C433.83 28.132 440.347 20.894 446.946 21C457.29 21.166 467.369 28.681 471.946 29C488.627 30.162 500.533 14.307 513.946 14C549.183 13.193 548.978 33.851 565.946 30C571.224 28.802 573.512 22.489 579.946 21C589.141 18.872 593.615 21.211 602.947 20C616.715 18.213 617.432 -0.590003 646.946 3C667.666 5.52 674.905 31.458 690 40V153H0V40Z' fill='url(%23paint0_linear)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='0' y1='153' x2='0' y2='0' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%234D5ABB'/%3e%3cstop offset='1' stop-color='%236F82FF'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
  background-position-y: 70px;
  animation-duration: 9s;
}

.waterlayer_a{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: 0 0/contain repeat-x;
  transition: background-position 0.3s ease-in-out;
  animation-name: mountain-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 245px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='690' height='245' viewBox='0 0 690 245' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 130C24.589 114.234 49.303 80.075 64.946 69C73.557 62.904 102.228 68.806 119.946 63C147.857 53.854 162.909 12.118 220.396 8.88901C244.454 7.53701 237.97 44.826 291.946 46C318.118 46.569 352.714 0.0900071 370.946 1.00001C382.814 1.59301 399.732 13.754 418.184 27.618C429.957 36.464 449.838 38.331 461.946 46C472.903 52.94 479.14 64.021 488.946 66C508.192 69.885 513.886 60.213 532.946 65C582.129 77.351 591.441 128.243 690 127V245H0V130Z' fill='url(%23paint0_linear)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='0' y1='245' x2='0' y2='0' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23323B79'/%3e%3cstop offset='1' stop-color='%234652AA'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
  background-position-y: 100px;
  animation-duration: 18s;
}

.waterlayer_r{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: 0 0/contain repeat-x;
  transition: background-position 0.3s ease-in-out;
  animation-name: mountain-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 292px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='690' height='292' viewBox='0 0 690 292' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 75C5.48201 78.401 12.54 82.045 17.946 84C24.235 86.274 40.076 62.863 47.946 62C59.261 60.759 71.466 84.468 79.946 82C83.198 81.054 100.534 69.704 114.946 68C123.307 67.012 127.211 73.269 135.946 75C179.138 83.561 228.298 83.456 260.946 75C279.696 70.144 308.697 60.566 334.946 61C357.448 61.372 376.371 72.478 402.661 62.094C411.824 58.475 419.618 45.225 427.946 41C437.265 36.272 446.997 40.493 454.946 35C467.645 26.225 476.507 14.925 489.946 8.99998C497.305 5.75598 507.801 5.26698 516.946 5.02798C522.008 4.89498 526.647 0.124984 530.946 0.999984C541.014 3.04798 549.472 12.609 558.946 17C568.816 21.574 585.637 13.789 594.946 17C601.962 19.42 601.402 32.792 608.946 36C618.969 40.262 638.86 36.233 648.946 41C665.497 48.822 672.294 65.861 690 75V292H0V75Z' fill='url(%23paint0_linear)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='0' y1='292' x2='0' y2='0' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%232E366F'/%3e%3cstop offset='1' stop-color='%23404A9A'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
  background-position-y: 130px;
  animation-duration: 25s;
}

.waterlayer_e{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: 0 0/contain repeat-x;
  transition: background-position 0.3s ease-in-out;
  animation-name: mountain-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 356px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='690' height='356' viewBox='0 0 690 356' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M690 69C678.369 72.673 667.732 78.672 656.946 81C638.484 84.984 626.335 70.478 610.946 71C591.762 71.651 600.724 93.142 563.946 84C556.497 82.148 541.629 67.277 530.946 65C524.55 63.637 523.077 70.842 516.946 70C508.693 68.867 500.983 71.197 495.628 71.614C477.544 73.02 484.605 83.397 464.765 84.93C452.69 85.863 454.961 85.562 447.947 79C425.784 58.268 423.729 61.166 392.946 77C389.555 78.745 383.322 61.821 365.946 54C350.011 46.827 322.208 61.438 309.946 55C305.696 52.768 296.225 40.001 290.946 37C286.235 34.321 285.771 41.428 280.946 39C264.813 30.881 250.878 3.596 238.946 0.999996C228.874 -1.192 220.345 20.544 211.946 22C205.435 23.129 200.403 16.268 184.947 23C175.69 27.032 181.476 39.556 174.947 39C152.72 37.107 153.341 41.475 150.946 48C146.858 59.139 132.744 59.927 122.947 61C115.367 61.83 114.885 35.59 102.947 36C87.063 36.545 85.414 60.597 76.946 59C33.409 50.787 61.893 77.944 31.946 75C15.604 73.393 21.328 63.645 14.946 65C3.03801 67.529 1.59301 69.028 0 69V349L690 356L690 69Z' fill='url(%23paint0_linear)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='0' y1='356' x2='0' y2='0' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%232C336A'/%3e%3cstop offset='1' stop-color='%232D346C'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
  background-position-y: 160px;
  animation-duration: 30s;
}


.stars div:nth-child(3){
   position: absolute;
  background: linear-gradient(to right, #ffb058 0%, transparent 100%);
    width: 100px;
    height: 10px;
    border-radius: 200px;
    right: 15%;
    top: 15%;
    -webkit-animation: shooting-star 8s infinite;
    animation: shooting-star 8s infinite;
}

.stars div:nth-child(1){
   position: absolute;
  background: linear-gradient(to right, #ffb058 0%, transparent 100%);
    width: 100px;
    height: 10px;
    border-radius: 200px;
    right: 20%;
    top: 30%;
    -webkit-animation: shooting-star 9s infinite;
    animation: shooting-star 9s infinite;
}

.stars div:nth-child(2){
   position: absolute;
   background: linear-gradient(to right, #ffb058 0%, transparent 100%);
    width: 100px;
    height: 10px;
    border-radius: 200px;
    right: 18%;
    top: 20%;
    -webkit-animation: shooting-star 8s infinite;
    animation: shooting-star 10s infinite;
}



@keyframes shooting-star {
0% {
    transform: translate(0, 0) rotate(-30deg) scale(0.8);
    opacity: 1;
}

25% {
    transform: translate(-50px, 50px) rotate(-30deg) scale(0.8);
    opacity: 0;
}
100% {
    transform: translate(0, 0) rotate(-30deg) scale(0.8);
    opacity: 0;
}}
!

JS
!
999px

Console