#background
#main
%h1.primary>Gradients
%p.primary>Press space
.output>
#gradient
View Compiled
#background {
background:linear-gradient( 45deg, black, black);
overflow:auto;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
}
#main {
position:relative;
text-align:center;
color:white;
text-shadow:0 1px 2px black;
font-family:"Helvetica Neue";
h1 {
font-weight:100;
margin-top:50px;
}
.primary {
text-transform:uppercase;
letter-spacing:1em;
}
.sub {
font-family:courier;
font-size:0.6em;
}
p {
margin-bottom:20px;
}
.output {
border-radius:5px;
background-color:rgba(255,255,255,0.2);
margin:0px auto;
width:400px;
padding:20px;
box-shadow:0 2px 4px rgba(0,0,0,0.5);
color:black;
text-shadow:none;
font-family:"courier";
font-size:0.8em;
font-variant-numeric: tabular-nums;
}
}
View Compiled
var bg = document.getElementById("background");
var out = document.getElementById("gradient");
document.body.onkeyup = function(e){
if(e.keyCode == 32){
randomBackground();
}
}
document.addEventListener('DOMContentLoaded', function(){
randomBackground();
}, false);
function randomBackground() {
var from = '#'+Math.floor(Math.random()*16777215).toString(16);
var to = '#'+Math.floor(Math.random()*16777215).toString(16);
var deg = Math.floor(Math.random()*100).toString();
var gradient = 'linear-gradient(' + deg + 'deg,' + from + ','+ to + ')';
bg.style.background = gradient;
out.innerHTML="background:"+gradient+";";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.