HTML CSS examples for CSS Widget:Color
mimic Photoshop "Color Overlay" in CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .design {<!-- w w w . ja v a 2 s.c o m--> color: #fff; border: 1px solid #515151; padding: 4px; background: url(https://www.java2s.com/style/demo/Firefox.png); background: -moz-linear-gradient(top, rgba(179,183,189,1) 0%, rgba(106,114,125,1) 85%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,183,189,1)), color-stop(85%,rgba(106,114,125,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* IE10+ */ background: linear-gradient(to bottom, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* W3C */ } </style> </head> <body> <input type="button" class="design" value="Designed Button"> </body> </html>