Physical / Industrial
Carbon Fiber
Dark technical weave material, जो interface को performance, hardware या engineering tone देता है.
Cx
Usage
- AI dashboards
- Performance products
- Hardware pages
Parameters
- weave scale
- contrast
- shine
- angle
- base color
AI Prompt
Dark woven diagonal strands, low specular shine, technical precision और foreground text contrast वाली carbon fiber UI material बनाएं.
Tailwind notes
Crossed repeating-linear-gradients small scale और low contrast के साथ उपयोग करें.
Performance notes
Small areas में repeating gradients ठीक हैं. पूरी page पर high-frequency pattern न फैलाएं.
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;
}React example
export function CarbonFiberPanel({ children }) {
return <div className="carbon-fiber">{children}</div>;
}