Skip to content

Instantly share code, notes, and snippets.

@westc

westc/4-corner-css3-gradient.html

Created September 28, 2018 13:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westc/7168408942af79f5d539da2a247509ff to your computer and use it in GitHub Desktop.
Save westc/7168408942af79f5d539da2a247509ff to your computer and use it in GitHub Desktop.
Download ZIP
4 corner CSS3 gradient pattern. Underlying background color is determined by mix the rgb of the gradient colors together.
Raw
4-corner-css3-gradient.html
<html>
<head>
<style>
.test {
background-image:
linear-gradient(315deg, hsl(0, 100%, 50%), rgba(255,255,255,0) 50%),
linear-gradient(45deg, hsl(90, 100%, 50%), rgba(255,255,255,0) 50%),
linear-gradient(135deg, hsl(180, 100%, 50%), rgba(255,255,255,0) 50%),
linear-gradient(225deg, hsl(270, 100%, 50%), rgba(255,255,255,0) 50%);
background-color: #808080;
display: block;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="test">&nbsp;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment