Skip to content

Instantly share code, notes, and snippets.

@Closer2U

Closer2U/index.html

Created October 6, 2020 14:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Closer2U/c09eeb7c19f8d180917d2bab564a4777 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Closer2U/c09eeb7c19f8d180917d2bab564a4777 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/dojamuh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
section.dark {
background: #222;
}
section.dark .gradient1 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient1 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient1::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-gradient(linear,left top, right top,from(#23966c), color-stop(#faaa54), color-stop(#e23b4a), color-stop(#db0768), to(#360670));
background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient1::before {
mix-blend-mode: multiply;
}
}
section.dark .gradient2 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient2 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient2::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient2::before {
mix-blend-mode: multiply;
}
}
/* Page styling, ignore */
body {
margin: 0;
font-family: "Lato", sans-serif;
text-align: center;
}
section {
min-height: 50vh;
padding: 2em;
}
.gradient1 {
font-size: 96px;
margin: 0.5em;
opacity: 0.9;
}
.gradient2 {
text-align: center;
margin: 1em auto;
width: 10em;
}
</style>
</head>
<body>
<section class="dark">
<h1 class="gradient1">CSS Gradient Text</h1>
<p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</section>
<script id="jsbin-source-css" type="text/css">
section.dark {
background: #222;
}
section.dark .gradient1 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient1 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient1::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-gradient(linear,left top, right top,from(#23966c), color-stop(#faaa54), color-stop(#e23b4a), color-stop(#db0768), to(#360670));
background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient1::before {
mix-blend-mode: multiply;
}
}
section.dark .gradient2 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient2 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient2::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient2::before {
mix-blend-mode: multiply;
}
}
/* Page styling, ignore */
body {
margin: 0;
font-family: "Lato", sans-serif;
text-align: center;
}
section {
min-height: 50vh;
padding: 2em;
}
.gradient1 {
font-size: 96px;
margin: 0.5em;
opacity: 0.9;
}
.gradient2 {
text-align: center;
margin: 1em auto;
width: 10em;
}</script>
</body>
</html>
Raw
jsbin.dojamuh.css
section.dark {
background: #222;
}
section.dark .gradient1 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient1 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient1::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-gradient(linear,left top, right top,from(#23966c), color-stop(#faaa54), color-stop(#e23b4a), color-stop(#db0768), to(#360670));
background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient1::before {
mix-blend-mode: multiply;
}
}
section.dark .gradient2 {
color: #fff;
}
@supports (mix-blend-mode: lighten) {
section.dark .gradient2 {
display: inline-block;
position: relative;
color: #fff;
background: #000;
mix-blend-mode: lighten;
}
section.dark .gradient2::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
pointer-events: none;
}
section.dark .gradient2::before {
mix-blend-mode: multiply;
}
}
/* Page styling, ignore */
body {
margin: 0;
font-family: "Lato", sans-serif;
text-align: center;
}
section {
min-height: 50vh;
padding: 2em;
}
.gradient1 {
font-size: 96px;
margin: 0.5em;
opacity: 0.9;
}
.gradient2 {
text-align: center;
margin: 1em auto;
width: 10em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment