Linear gradient fill for asp. button

background: #cceeff; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRkZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, #cceeff 0%, #ffddee 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cceeff), color-stop(100%,#ffddee)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* IE10 preview */
background: linear-gradient(to bottom, #cceeff 0%,#ffddee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cceeff', endColorstr='#ffddee',GradientType=0 ); /* IE6-8 */

• You can have a statically defined image file which you can use on your button. If the size of the button is variable, you can stretch this image, separately vertically or horizontally. As the image is a pixel bitmap, you may face some image quality problems due to re-sample, which can be made not noticeable if your image is bigger than all expected sizes of the button backgrounds. Another problem of the stretch could be the mangling of the pattern by this transform; you may or may not be concerned with that (I would).
• You can create the whole image for a button on a server side using System.Drawing on the fly, using System.Drawing.Bitmap, on request, which could be the button text, access key, sizes, and other required options. Please see: Bitmap Class (System.Drawing)[^].
  
  If only the image is requested, the HTTP response should have appropriate content-type, such as "image/png". See also: Media Types[^].
  
  Or, in principle, you can create a whole HTML or its fragment showing the button with ASP.NET. You can make it in the form of a custom control with custom rendering. In all cases, you will have to render the background pattern on the fly, unless you still want to stretch the fixed pattern, as I described in the previous item.
• Another alternative is purely client-side. You can generated some image on the fly using HTML5 Canvas. Please see:
  Canvas element — Wikipedia, the free encyclopedia[^],
  Canvas API — Web APIs | MDN[^].
• Another purely client-side approach, alternative to Canvas can be SVG element, which can be directly embedded in HTML5 and produce all kinds of interactive or animated behavior, as well as Canvas. It has a number of benefits over Canvas, such as graphical features and rendering quality:
  Scalable Vector Graphics — Wikipedia, the free encyclopedia[^],
  SVG | MDN[^].
  
  It's good to see what this approach can produce and get impressed: Gallery — mbostock/d3 Wiki · GitHub[^].
  
  Quite encouraging, isn't it? You can leverage all the power of SVG with JavaScript and HTML5 using the power library demonstrated above, d3: GitHub - mbostock/d3: A JavaScript visualization library for HTML and SVG.[^].