<!DOCTYPE html>
<head>
<title>Gradient text field</title>
<style>
.fancy {
    border: 0px;
    padding: 5px 10px 5px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0066FF), to(#0058DB), color-stop(.4,#ADCEFF));
    background-image: -moz-linear-gradient(19% 75% 90deg, #0058DB, #ADCEFF, #0066FF 60%);
    height: 30px;
    width: 300px;
    font-size: 1em;
    color: white;
    -webkit-box-shadow: 2px 2px 2px #666666;
    -moz-box-shadow: 2px 2px 2px #666666;
    text-shadow: 2px 2px 2px #666666;
}
</style>
</head>
<body>
<p>This is a highly styled text field with a linear gradient background.</p>
<input type=text class=fancy value="What a fancy text field!">
</body>