Beyond Stripes: Building Background Patterns with CSS

CSS gradients are the go-to for background patterns, and stripes are the classic example. But gradients can do much more than parallel bands. With a bit of creativity, they can produce circles, rays, and other geometric motifs. You can even push past gradients entirely, using emojis and CSS shapes as the building blocks of a repeating background.

All patterns discussed here rely on the same principle: the background property accepts multiple values, which lets you stack different layers. By defining a background-size, you control how those layers repeat across the element.

Gradient-Driven Patterns

CSS offers three gradient functions, each producing a distinct visual effect:

  • linear-gradient(): Colors transition in a single direction, whether left-to-right, top-to-bottom, or at any specified angle.
  • radial-gradient(): Colors start at a central point and emanate outward.
  • conic-gradient(): Color stops are placed around a circle's circumference, creating ray-like shapes from the center.

Radial Gradients

Radial gradients are useful for generating circles and ellipses, which can be composed into more complex patterns. For instance, you can create a pattern of watermelons by layering an ellipse for the rind and flesh, and then scattering small black circles over it as seeds. Each radial-gradient() call needs to specify the shape (circle or ellipse) and its starting position, followed by the color stops with their respective positions within the gradient.

Conic Gradients

Conic gradients produce wedge-like, ray-like shapes, making them suitable for geometric patterns. However, be aware of their support: at the time of writing, Firefox does not support conic-gradient(), which is a significant limitation for production use.

Emoji-Based Patterns

Emojis offer an organic alternative to the rigid geometry of gradients. The trick is to turn an emoji into a reusable image that the background property can reference.

Solid-Color Emoji Patterns

First, you create an "icon" from an emoji by giving it a transparent base color and using a text-shadow to create a solid silhouette. This visual can then be embedded in an SVG data URL, which is then assigned to the background property. The result is a pattern built from your chosen emoji's shape.

Gradient-Colored Emoji Patterns

To add a gradient to the emoji's shape, you don't rely on the text shadow. Instead, you place a gradient background behind the emoji and use the background-clip property. With the value set to text, the gradient is clipped to the actual glyph shape of the emoji. This effect is then captured in an SVG data URL for use as a background pattern.

Translucent Emoji Patterns

This method is identical to using solid-color emojis, but with a key difference: the color values for the text shadow are not fully opaque. By using rgba() or hsla() for the shadow color, you produce a semi-transparent emoji pattern that lets underlying layers show through.

The Limitations of SVG Text

An alternative path involves placing the emoji directly inside an SVG <text> element rather than using the HTML approach. Unfortunately, this technique does not render a consistent solid shadow across all browsers. Attempts to work around this with CSS or SVG filters, or even using the stroke attribute for an outline, proved unsuccessful.

The Experimental element() Function

For turning an HTML element into a background image without any SVG conversion, the CSS element() function is a direct approach. You can include an element in the HTML, like a paragraph with an emoji, and then pass that element's ID to the element() function within the background property of another element.

This makes the emoji (or any other CSS shape) a literal image you can use in a pattern. However, the support for this function is sparse, making it a highly experimental technique. A notable caveat is that the source element must be rendered on the page for it to appear in the background image. To hide the original element from view, you can employ CSS techniques like mix-blend-mode to mask it out visually.

While gradients are a powerful and standard tool, these methods show that they aren't the only path to creative background patterns. Combining the flexible nature of the background property with gradients, emojis, and CSS shapes opens up a wider design space for your projects.