CodeKitHub¿Qué es esta herramienta?
Esta herramienta aplica un degradado lineal predefinido de tres puntos para cada estilo metálico, ajustado para parecer luz reflejándose en una superficie metálica pulida.
Alterna entre oro, plata, bronce y oro rosa con el selector de estilo, cada uno con su propio degradado, color de texto y sombra ajustados a ese metal.
Una vista previa en vivo se actualiza al instante mientras escribes el texto del botón, cambias de estilo o ajustas el radio de las esquinas, para que veas exactamente cómo se verá antes de copiar el CSS.
¿Por qué utilizarlo?
- Estás lanzando una página de precios con un plan "Premium" o "VIP" y quieres que el botón de suscripción se vea a la altura del precio, no como un botón gris genérico de Bootstrap.
- Un cliente de e-commerce te pidió que el botón de "Comprar ahora" en su tienda de joyería o relojes transmita lujo, y un botón plano azul no comunica eso — el estilo Oro o Bronce encaja con la estética del producto.
- Estás diseñando una insignia o certificado digital de "Logro desbloqueado" para una app de gamificación y necesitas que el sello se vea metálico, no un simple badge de color sólido.
- Quieres armar los tres niveles de membresía de tu sitio (bronce, plata, oro) con botones que reflejen visualmente la jerarquía, en vez de usar el mismo color para los tres planes.
- Probaste el estilo Oro pero tu marca usa tonos más fríos y elegantes — cambia a Plata o a Oro Rosa y compara en la vista previa cuál combina mejor con el resto de tu paleta.
- Necesitas ajustar el radio de las esquinas para que el botón combine con el resto de tu sistema de diseño (esquinas muy redondeadas o casi rectas) sin perder el efecto de brillo metálico.
Cómo utilizarlo
- Escribe el texto de tu botón.
- Elige un estilo metálico: oro, plata, bronce u oro rosa.
- Ajusta el control deslizante del radio de borde para que coincida con el estilo de esquinas de tu diseño.
- Haz clic en "Copiar" para copiar el código CSS generado y pégalo en tu hoja de estilos.
Ejemplo
Entrada
Text: "Buy Now", Style: Gold, Radius: 8Resultado
background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;El CSS generado combina un degradado metálico de tres puntos, un color de texto y sombra a juego, y un padding estándar de botón para obtener un bloque de estilo listo para usar.
Estilos metálicos de un vistazo
Cada estilo metálico usa su propio degradado, color de texto y color de sombra ajustados.
| Estilo | Tono del degradado | Color del texto |
|---|---|---|
| Oro | Amarillo dorado cálido, de claro a oscuro a claro | Dorado marrón profundo (#5c3d00) |
| Plata | Gris claro frío, de claro a oscuro a claro | Gris oscuro (#333333) |
| Bronce | Marrón cobrizo cálido, de claro a oscuro a claro | Marrón profundo (#3e2408) |
| Oro Rosa | Rosa suave, de claro a oscuro a claro | Rosa profundo (#4a1620) |
Herramientas relacionadas
Para más generadores CSS, prueba estos.
→ Generador de Texto Neón · Generador de Texto en Relieve CSS · Generador de Border Radius
Cómo elegir el metal correcto según el contexto
Cada acabado metálico transmite una sensación distinta, y elegir el equivocado puede hacer que el botón se sienta fuera de lugar respecto al resto del diseño.
- Oro comunica premium o exclusivo — ideal para el plan más caro de una tabla de precios o un botón de checkout de alto valor.
- Plata funciona bien para acciones secundarias importantes, como "Ver detalles" en un plan intermedio, sin competir visualmente con un botón de Oro cercano.
- Bronce se asocia naturalmente con el tercer lugar o el nivel de entrada — úsalo para el plan básico dentro de una jerarquía de tres niveles.
- Oro Rosa encaja mejor en marcas orientadas a moda, belleza o productos lifestyle, donde el tono cálido y suave se siente más apropiado que el oro clásico.
Preguntas frecuentes
¿Por qué el degradado tiene tres paradas de color en lugar de dos?
Un degradado de tres paradas (claro, oscuro, claro) imita cómo se refleja la luz en una superficie metálica curva o cepillada, lo que se ve mucho más realista que un simple degradado de dos colores de claro a oscuro.
¿Puedo usar esto en un enlace o un div en lugar de un elemento de botón?
Sí — el CSS generado son solo propiedades estándar de background, color, border-radius, box-shadow y text-shadow, así que funciona en cualquier elemento que normalmente estilizarías como un botón.
¿Por qué el color del texto es oscuro en lugar de blanco?
Las superficies metálicas como el oro y el bronce se ven mejor con un color de texto oscuro y cálido que combine con el tono del metal; el texto blanco tiende a verse plano y rompe la ilusión metálica.
¿Esta herramienta guarda o rastrea lo que escribo?
No. El CSS se genera enteramente en tu navegador — nada se envía ni se almacena en un servidor.
¿Funcionará en todos los navegadores?
Sí — linear-gradient, box-shadow y text-shadow cuentan con excelente soporte en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
¿Cómo hago un estado hover o active para el botón después de copiar el CSS?
El CSS generado cubre el estado normal del botón; para el hover, una técnica simple es añadir un `filter: brightness(1.1)` en `:hover` para que el metal se vea más brillante al pasar el cursor, sin tener que redefinir todo el degradado a mano.
¿Cuál estilo metálico funciona mejor para un fondo oscuro?
Oro y Oro Rosa suelen destacar más sobre fondos oscuros porque su brillo cálido contrasta con la oscuridad, mientras que Plata puede perder definición si el fondo es gris o negro sin suficiente contraste — pruébalo en la vista previa antes de decidir.
¿Por qué mi botón se ve plano cuando cambio el color del degradado manualmente?
Si reemplazas el degradado de tres paradas por uno de dos colores, pierdes el reflejo central que simula la curvatura de la superficie metálica. Para mantener el efecto pulido, conserva la estructura de tres paradas (claro-oscuro-claro) y solo ajusta los tonos dentro de esa estructura.
¿Puedo usar el mismo estilo en un botón deshabilitado (disabled)?
Es mejor no hacerlo tal cual — el brillo metálico comunica que el botón es interactivo. Para un estado disabled, reduce la opacidad del bloque de CSS generado o cambia a una versión desaturada, para que quede claro que no se puede hacer clic.