Digital / Web UI
Chrome UI
Una superficie metálica reflectante con bandas brillantes, cortes oscuros y sensación industrial pulida.
Cr
Usos
- Titulares hero
- Botones primarios
- Marcos premium
Parámetros
- highlight bands
- contrast
- border
- reflection angle
- radius
Prompt IA
Crea una superficie chrome con gradientes metálicos, reflejos negros, luces blancas finas y borde espejado.
Notas Tailwind
Usa gradientes lineales por capas en lugar de imágenes, con bordes ajustados y fondo oscuro.
Rendimiento
Los gradientes estáticos son ligeros. Evita animar grandes fondos chrome todo el tiempo.
CSS
.chrome-ui {
border: 1px solid rgba(255,255,255,.28);
border-radius: 16px;
background:
linear-gradient(115deg, #0b0d0f 0%, #f4f7f6 18%, #7d8588 27%, #fefefe 36%, #14171a 49%, #b8c1c4 64%, #ffffff 74%, #2b3033 100%);
color: #050607;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 18px 50px rgba(0,0,0,.34);
}Ejemplo React
export function ChromeButton({ children }) {
return <button className="chrome-ui">{children}</button>;
}