VmVibe Materials
EN中文ESHIAR
Back to map
Physical / Industrial

Carbon Fiber

A dark technical weave material that gives interfaces a performance, hardware, or engineering tone.

Status: ReadyCx
Cx

Usage

  • AI dashboards
  • Performance products
  • Hardware pages

Adjustable parameters

  • weave scale
  • contrast
  • shine
  • angle
  • base color

AI Prompt

Create a carbon fiber UI material with dark woven diagonal strands, low specular shine, technical precision, and enough contrast for foreground text.

Tailwind notes

Use crossed repeating-linear-gradients with small scale and low contrast.

Performance notes

Repeating gradients are fine at small areas. Avoid covering the entire page with high-frequency patterns.

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>;
}