Background gradient patterns
Although I've often used subtle linear gradients in designs, I've found less practical use for radial gradients and repeating gradients. However, clever folks out there have harnessed the power of gradients to create background gradient patterns. Let's look at an example from CSS Ninja, Lea Verou's collection of CSS background patterns, available at http://lea.verou.me/css3patterns/:
.carbon-fibre {
margin: 1rem;
width: 400px;
height: 200px;
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(
black 15%,
transparent 16%
) 8px 8px,
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(
rgba(255, 255, 255, 0.1) 15%,
transparent 20%
) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
}
Here's what that gives us in the browser, a carbon fiber background effect:
Figure 7.6: A carbon fiber...