Skip to content

Instantly share code, notes, and snippets.

@splosch
Last active August 29, 2015 14:15
Show Gist options
  • Save splosch/569f5644fe0b9be298e6 to your computer and use it in GitHub Desktop.
Save splosch/569f5644fe0b9be298e6 to your computer and use it in GitHub Desktop.
CSS gradient framing for a white box with text
<div class="fancy-border-outer">
<p class="fancy-border-inner">text with colorful gradient frame</p>
</div>
<div class="fancy-border-outer">
<p class="fancy-border-inner">text with colorful <br> gradient frame <br> Testbla</p>
</div>
/**
* Colorful framing
*/
*{
font-family: "Arial";
color:#808080;}
.fancy-border-inner{
margin:0;
padding:20px;
background:white
}
.fancy-border-outer {
display:inline-block;
padding:5px;
}
.fancy-border-outer{
background: #cfdc00; /* Old browsers */
background: -moz-linear-gradient(65deg, #57a6db 0%, #93cc3f 72%, #e9f2a4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#57a6db), color-stop(72%,#93cc3f), color-stop(100%,#e9f2a4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(65deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* IE10+ */
background: linear-gradient(15deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a6db', endColorstr='#e9f2a4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment