Físico / Industrial
Carbon Fiber
Un tejido técnico oscuro que da a la interfaz un tono de rendimiento, hardware o ingeniería.
Cx
Usos
- Dashboards IA
- Productos de rendimiento
- Páginas hardware
Parámetros
- weave scale
- contrast
- shine
- angle
- base color
Prompt IA
Crea un material carbon fiber con tejido diagonal oscuro, brillo bajo, precisión técnica y contraste para texto.
Notas Tailwind
Usa repeating-linear-gradients cruzados con escala pequeña y bajo contraste.
Rendimiento
Los repeating gradients funcionan en áreas pequeñas. Evita cubrir toda la página con patrón de alta frecuencia.
CSS
.carbon-fiber {
background:
linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
repeating-linear-gradient(45deg, #101414 0 4px, #050707 4px 8px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px);
border: 1px solid rgba(255,255,255,.12);
color: #e9f2ef;
}Ejemplo React
export function CarbonFiberPanel({ children }) {
return <div className="carbon-fiber">{children}</div>;
}