Problema con reflejo en formulario

Hola amigos, tengo un problema con el manejo de CSS en mi formulario, quiero hacer el efecto de reflejo o marca de agua hacia abajo del formulario, leyendo encontre una propiedad -webkit-box-reflect para poder hacerlo, pero solamente se ve bien en chrome, no puedo hacer que esto se vea en firefox.

La estructura de mi formulario es la siguiente:

Código HTML :

<div class="box" id="efecto_formulario">
   <form method="#" action="#">
       <h1>Contactame:</h1>
       <label>
          <span>Nombre</span>
          <input type="text" class="input_text" name="nombre" id="nombre">
       </label>
       <label>
          <span>E-Mail</span>
           <input type="text" class="input_text" name="email" id="email">
       </label>
       <label>
          <span>Telefono</span>
          <input type="text" class="input_text" name="telefono" id="telefono">
       </label>
       <label>
          <span>Mensaje</span>
          <textarea class="message" name="mensaje" id="mensaje"></textarea>
          <input type="button" class="button" value="Enviar Datos">
       </label>
    </form>
</div>

El siguiente estilo que aplique es sencillo, un fodon de color hexadecimal #FFFFFF una posicion relativa, margenes internos y externos de 0px, unos pocos estilos a las etieutas y al boton enviar.

Código CSS :

/*******************************
FORMULARIO DE CONTACTO
*******************************/

form, input, textarea{
   color: #FFFFFF;
   font-family: 'Verdana';
   margin: 0px;
   padding: 0px;
}

div.box{
   background: #222222;
   border: 1px solid #262626;
   font-family: 'Verdana';
   margin: 0px;
   position: relative;
   top: -15px;
   width: 550px;
}

div.box h1{
   border-bottom: 1px solid #161712;
   border-top: 1px solid #161712;
   color: #FFFFFF;
   font-size: 18px;
   padding: 5px 0px 5px 5px;
   text-transform: uppercase;
}

div.box label{
   background: #1C1C1C;
   display: block;
   padding: 10px 0px 10px 0px;
   width: 100%;
}

div.box label span{
   color: #bbbbbb;
   display: block;
   float: left;
   font-size: 12px;
   padding: 5px 20px 0px 0px;
   text-align: right;
   width: 100px;
}

div.box .input_text{
   background: #262626;
   border-bottom: 1px double #171717;
   border-left: 1px double #333333;
   border-top: 1px double #171717;
   border-right: 1px double #333333;
   padding: 10px 10px;
   width: 200px; 
}

div.box .message{
   background: #262626;
   border-bottom: 1px double #171717;
   border-left: 1px double #333333;
   border-top: 1px double #171717;
   border-right: 1px double #333333;
   height: 150px;
   overflow: hidden;
   padding: 7px 7px;
   width: 350px;
}

div.box .button{
   background: #CC0000;
   border: 0px;
   border-bottom: 1px double #660000;
   border-left: 1px double #FF0033;
   border-right: 1px double #FF0033;
   border-top: 1px double #660000;
   left: 382px;
   margin: 0px 0px 10px 0px;
   padding: 4px 7px;
   position: relative;
   top: 10px;
   width: 100px; 
}

Para el efecto de reflejo aplique el -webkit-box-reflect dentro de mi archivo de estilos css

Código CSS :

div#efecto_formulario{
  -webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5)));
}

Pero no encuentro la manera de como hacer el mismo efecto y que sea visible en firefox, espero me puedan ayudar con este problema.

Lamento decirte que de momento esa propiedad solo la soportan Chrome y Safari...
Podés verlo acá.
Saludos!

Alguna alternativa que me puedas recomendar para simular el mismo efecto?

mmmm... en este momento no se me ocurre nada... pero no entiendo para que necesitas un reflejo en un formulario... sino ponele una imagen abajo con menos opacidad...

Solamente queria ese efecto para que se viera más atractivo el formulario.