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

              
                <div id="App">
    <h1>Linear<span v-bind:style="'color:'+titleColor">Gradient</span></h1>
    <h4>Click on an item to copy the source code</h4>
    <div class="Gradient" v-bind:style="item.syntax" v-for="item in styles" v-bind:title="item" data-clipboard-action="copy" data-clipboard-target=".Gradient" v-bind:data-clipboard-text="item.syntax" v-on:click="copy"><h2>{{ item.color }}</h2></div>
  </div>
              
            
!

CSS

              
                
* {
  transition-duration: 1s;
  margin: 0px;
}
*::selection {
  background-color: transparent;
}

#App {
  display: flex;
  flex-direction: column;
}
#App h1 {
  color: black;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  text-align: center;
  cursor: default;
  margin-top: 100px;
  margin-bottom: 10px;
}
#App h1 span{
  color: #8A9BF2;
}
#App h4{
  color: black;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-align: center;
  margin-bottom: -50px;
  cursor: default;
  margin-top: 10px;
  margin-bottom: 50px;
}
.Gradient {
  background-color: gray;
  width: 90%; height: 200px;
  display: block; margin: 50px auto;
  cursor: default;
  border-radius: 5px
}
.Gradient h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
}
.Gradient:hover {
  height: 300px;
}
.Gradient h2:hover {
  line-height: 300px;
}
              
            
!

JS

              
                var App = new Vue({
    el: '#App',
    data: {
      styles: [
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
        {colorA: "", colorB: "", color: "", syntax: ""},
      ],
      titleColor: "",
    },
    methods: {
      copy: function(){
        swal({
          title: "Copied to clipboard",
          icon: "success",
          timer: 700,
        });
      }
    }
});

new ClipboardJS('#App .Gradient');

App.titleColor = "#"+Math.floor(Math.random()*16777215).toString(16);

for (let i = 0; i < App.styles.length; i += 1){
  App.styles[i].colorA = "#"+Math.floor(Math.random()*16777215).toString(16);
  App.styles[i].colorB = "#"+Math.floor(Math.random()*16777215).toString(16);
  App.styles[i].color = App.styles[i].colorA +", "+ App.styles[i].colorB
  App.styles[i].syntax = "background: linear-gradient(to right, "+App.styles[i].color+");";
}

              
            
!
999px

Console