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

Quick-add: + add another resource

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.

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.

            
              <img src="https://dl.dropboxusercontent.com/u/16982098/20170120_085356.jpg" alt="sky" />

<svg viewBox="0 0 120 20" id="Headline">
  <defs>
        <linearGradient id="MyGradient" x1="0" x2="0" y1="0" y2="1">
            <stop stop-color="rgba(255,255,255,0.8)" offset="0%" />
            <stop stop-color="rgba(255,255,255,0.8)" offset="20%" />
            <stop stop-color="rgba(255,255,255,0)" offset="80%" />
        </linearGradient>
    </defs>
  <text fill="url(#MyGradient)" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">morning arise</text>
</svg>

<svg id="Skyline" preserveAspectRatio="xMinYMax meet" viewBox="0 0 684 89" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
  <path d="M0 89v-1.45l6.584-6.31.026-5.472 3.74.017.014-2.947 3.584.017-.013 2.737 6.39.03-.01 2.316 3.428.017-.023 4.842 4.364.02.026-5.473 4.987.024.06-12.632 3.74.017.01-2.105 3.897.02-.012 2.525 1.56.008.023-5.052 4.83.023-.012 2.738 2.65.013-.074 15.16 2.805.013-.014 2.948 3.43.017.107-22.317 3.965.02.013-2.528 9.125.044-.012 2.527 4.675.022-.104 21.686 18.702.09.15-31.16 2.182.01.014-2.947 5.142.025-.01 2.526 3.427.017-.148 30.95 3.272.016.133-27.79 2.182.01.014-3.16 6.392.03-.01 2.317 2.648.013-.08 16.633 2.805.013.017-3.37 2.96.015-.015 3.37 2.65.01.026-5.473 14.805.07-.08 16.634 4.676.02.053-11.157 14.34.07-.05 10.104 7.48.036.09-18.527 2.494.01.016-3.157 5.455.026-.013 2.947 5.766.028-.015 3.16 4.987.023-.077 16.21 3.272.017.056-11.79 2.027.01.014-2.948 5.766.028-.014 2.947 3.583.018-.044 9.263 13.09.063.17-34.95 1.557.008.04-8.63 2.496.01.025-5.263 14.493.07-.023 5.052 4.364.02-.22 45.9 4.52.02.1-21.053 2.183.01.03-6.105 3.117.013-.014 2.948 3.74.02-.01 2.105 3.273.015-.108 22.318 2.65.012.02-4.632 3.742.018.112-23.37 1.558.008 1.49-1.993 5.377.026-.01 2.42 2.494.014-.126 26.106 12.78.06.183-38.106 6.39.03-.014 3.16 1.558.006.01-2.106 9.662.047-.014 2.948 2.962.014-.163 33.896 3.742.018.05-10.738 2.963.014.014-2.947 3.904.018-.015 2.95 4.043.018-.05 10.317 5.922.028.123-25.686 2.027.01.042-8.843 13.247.064-.018 3.79 3.43.016-.08 16.633 9.038.043.288-60.004 1.092.005.017-3.578 7.95.038-.01 1.684 4.677.023-.304 63.372 11.844.056.08-16.843 9.04.043.066-13.685 13.092.064-.022 4.42 3.117.016-.052 10.738 3.742.018.016-3.58 8.572.04-.018 3.79 3.897.02-.036 7.158 2.34.012.125-26.107 2.337.01.025-5.053 4.52.02 5.922.03-.013 2.526 4.987.024-.073 15.16 5.3.025.017-3.58 5.767.028-.012 2.526 7.48.036-.025 5.475 2.648.012.013-2.633 2.494.013.014-2.843 5.922.03-.014 2.84 4.052.02-.01 1.79 1.872.01-.028 5.894 2.96.015.02-3.79 5.92.03.013-2.528 2.65.013.006-1.37 5.766.03-.014 2.842 4.052.02-.013 2.736 4.832.023-.016 3.37 2.34.01-.086 17.686 1.09.006.023-4.843 2.027.01.073-15.16 1.246.006.012-2.527 4.363.02-.01 2.316 1.402.007-.065 13.474 2.026.01.095-19.896 11.533.056-.025 5.37 1.447.006-.03 6.106.892.004-.08 16.212 3.274.016.012-2.317 1.403.007.026-5.685 1.246.006.107-22.316 8.726.042-.064 13.475 1.402.007-.043 9.054 3.897.02-.04 8.42 2.494.013.023-4.422 4.207.022.013-2.737 14.183.067.015-2.947 3.585.017-.016 3.37 3.74.017-.04 7.79 3.118.014.035-7.16 2.182.012.054-11.37 2.18.01.023-4.63 2.494.01 1.49-1.992 4.598.022.114-23.896 9.35.044-.115 24.213 5.142.024-.09 18.53 2.962.013.11-23.054 8.104.038-.01 2.42 7.792.04-.04 8.42 3.74.018.03-6.316 5.766.028.016-3.37 5.144.025-.1 20.634 7.95.038.112-23.58 1.402.005.01-1.894 8.26.04-.018 3.684 9.195.044-.115 23.896 4.364.02-.034 7.16 4.832.023.042-3.617 2.493.012 2.287 6.26L684 87.04V89H0z" fill="currentColor" fill-rule="nonzero"/>
</svg>
            
          
!
            
              body {
  min-height: 100vh;
  background-color: black;
  background-image: linear-gradient(top,
    #01050E 0%,
    #030511 10%,
    #060917 20%,
    #090F1F 30%,
    #11182A 40%,
    #1D253A 50%,
    #232E46 55%,
    #2E3A52 60%,
    #3E4A64 65%,
    #505D76 70%,
    #6D7687 75%,
    #90949D 80%,
    #B9B0A9 85%,
    #E4C6A7 90%,
    #FECE9D 91.5%,
    #FECF72 95.5%,
    #FEB131 97%,
    #F85D1E 99%,
    #923629 100%);
}

img {
  display: none;
  height: 100vh;
  margin: 0 auto;
}

#Headline {
  position: absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Trade Winds', cursive;
}

#Skyline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 10vh;
  max-width: 100%;
}
            
          
!
999px
Loading ..................

Console