Skip to content

Instantly share code, notes, and snippets.

@simonlindsay
Created February 4, 2021 22:45
Show Gist options
  • Select an option

  • Save simonlindsay/7a847a81bc731ac16eb94164cbfe2230 to your computer and use it in GitHub Desktop.

Select an option

Save simonlindsay/7a847a81bc731ac16eb94164cbfe2230 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
div {
background-color: mix(rgba(166, 145, 113), #0061fe, 32%);
position: relative;
width: 100px;
height: 100px;
}
div#second {
background-color: mix(rgba(166, 145, 113, 0.32), #0061fe);
}
div#third {
background-color: linear-gradient(0deg, rgba(166, 145, 113, 0.32), rgba(166, 145, 113, 0.32)), #0061fe;
}
<div id="first">With sass mix</div>
<div id="second">With sass mix</div>
<div id="third">With linear gradient</div>
div {
background-color: #3570d1;
position: relative;
width: 100px;
height: 100px;
}
div#second {
background-color: rgba(27, 105, 231, 0.66);
}
div#third {
background-color: linear-gradient(0deg, rgba(166, 145, 113, 0.32), rgba(166, 145, 113, 0.32)), #0061fe;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment