Skip to content

Instantly share code, notes, and snippets.

@BadgerCode

BadgerCode/webkit-gradient.html

Last active February 23, 2020 12:56
Show Gist options
  • Save BadgerCode/30280286900542f9909925ca0b267f04 to your computer and use it in GitHub Desktop.
Save BadgerCode/30280286900542f9909925ca0b267f04 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using webkit's initial gradient property from 2008
Raw
webkit-gradient.html
<html>
<!-- https://webkit.org/blog/175/introducing-css-gradients/ -->
<!-- Example output- https://i.imgur.com/SKsn0Bo.png -->
<head>
<style>
.radial {
width: 150px;
height: 150px;
border: 2px solid black;
background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255, 1, 136, 0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0, 201, 255, 0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199, 0, 0)), color-stop(80%, #e4c700));
}
.linear {
width: 130px;
height: 130px;
border: 2px solid black;
padding: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div class="radial"></div>
<h1>Linear Gradient Example</h1>
<div class="linear"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment