Design SystemPatterns
Background Patterns
Pure CSS background patterns for use in sections, cards and page backgrounds. Each pattern has light, dark and brand variations with copyable code.
13
01 · GeometricDots Pattern
Dot grid via repeated radial-gradient. 3 color variations.
background-color: #f7f3f0;
background-image: radial-gradient(rgba(242,126,75,.35) 1.5px, transparent 1.5px);
background-size: 24px 24px;
Grid Pattern
Orthogonal grid via crossed linear-gradient. Evokes technical precision and scientific rigor.
background-color: #fff;
background-image:
linear-gradient(rgba(242,126,75,.1) 1px, transparent 1px),
linear-gradient(to right, rgba(242,126,75,.1) 1px, transparent 1px);
background-size: 32px 32px;
Diagonal Lines
Diagonal stripes at 45° via repeating-linear-gradient. Subtle and directional texture.
background-color: #f7f3f0;
background-image: repeating-linear-gradient(
45deg,
rgba(242,126,75,.12), rgba(242,126,75,.12) 1px,
transparent 0, transparent 50%
);
background-size: 14px 14px;
Cross / Plus Pattern
Cross grid via double linear-gradient with positioning offset.
background-color: #fff;
background-image:
linear-gradient(rgba(242,126,75,.12) 1.5px, transparent 1.5px),
linear-gradient(to right, rgba(242,126,75,.12) 1.5px, transparent 1.5px);
background-size: 40px 40px;
background-position: -1.5px -1.5px;
Hexagon Pattern
Hexagonal pattern via inline SVG in background-image. Evokes molecular structure and science.
background-image: url("data:image/svg+xml,%3Csvg xmlns='...' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z...' fill='none' stroke='rgba(242,126,75,0.15)' stroke-width='1'/%3E%3C/svg%3E");
Organic Blobs
Organic blobs via elliptical radial-gradient. Soft and high aesthetic quality background.
background:
radial-gradient(ellipse 80% 60% at 20% 30%, rgba(242,126,75,.15) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 70%, rgba(237,191,103,.15) 0%, transparent 60%),
#f7f3f0;
Brand Watermark Pattern
Ambrosio Health symbol repeated as inline SVG watermark. Brand identity in background.
background-image: url("data:image/svg+xml,%3Csvg xmlns='...' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='rgba(242,126,75,0.1)' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='30' r='6' fill='rgba(242,126,75,0.07)'/%3E%3C/svg%3E");
background-size: 60px 60px;