Skip to content

Instantly share code, notes, and snippets.

@fk

fk/SassMeister-input-HTML.html

Created August 19, 2014 17:22
Show Gist options
  • Save fk/507819c58866f2d68eb3 to your computer and use it in GitHub Desktop.
Save fk/507819c58866f2d68eb3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="gradient"></div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
@import compass
$gradientbg: #4c628a
html,
body
background: #283348
padding: 0
margin: 0
html,
body,
.gradient
height: 100%
width: 100%
.gradient
+background(radial-gradient(50% 0, circle, rgba($gradientbg, .75) 0, rgba($gradientbg, 0) 500px))
Raw
SassMeister-output.css
html,
body {
background: #283348;
padding: 0;
margin: 0;
}
html,
body,
.gradient {
height: 100%;
width: 100%;
}
.gradient {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAiIHI9IjUwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0YzYyOGEiIHN0b3Atb3BhY2l0eT0iMC43NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRjNjI4YSIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background: -moz-radial-gradient(50% 0, circle, rgba(76, 98, 138, 0.75) 0%, rgba(76, 98, 138, 0) 500px);
background: -webkit-radial-gradient(50% 0, circle, rgba(76, 98, 138, 0.75) 0%, rgba(76, 98, 138, 0) 500px);
background: radial-gradient(circle at 50% 0, rgba(76, 98, 138, 0.75) 0%, rgba(76, 98, 138, 0) 500px);
}
Raw
SassMeister-rendered.html
<div class="gradient"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment