Skip to content

Instantly share code, notes, and snippets.

@jraycv

jraycv/CSS3 Center Radial

Created December 12, 2013 10:47
Show Gist options
  • Save jraycv/7926164 to your computer and use it in GitHub Desktop.
Save jraycv/7926164 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Center Radial
Raw
CSS3 Center Radial
To Start Applying this you just need to add the follwing code in you LESS file.
html,body{margin:0;padding:0;width:100%;height:100%}
.radial body{
background: url('Your Background Image Here') repeat;
&:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
}
Then to apply this to your html add the class radial in the html tag like this <html class="radial"> done. =)
Raw
Radial
.radial body{
background: url('Your Background Image Here') repeat;
&:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment