How to Create Grainy CSS Backgrounds Using SVG Filters

Grainy textures are a popular effect in modern web design. The subtle noise and rustic feel can add visual interest and depth to backgrounds, making them more engaging than simple flat colors. While you could use a raster image to achieve a grainy look, SVG filters offer a more flexible and performant approach.

In this deep dive tutorial, we‘ll explore how to harness the power of SVG filters to create dynamic grainy backgrounds that can scale to any size without losing quality. We‘ll cover everything from the basics of SVG filter primitives to advanced techniques for layering and animating grain. By the end, you‘ll have a solid understanding of how to add compelling grainy textures to your web projects.

Understanding SVG Filters and the feTurbulence Primitive

SVG filters allow us to apply a wide range of effects to SVG shapes and groups. Filters are defined within a <filter> element and can contain one or more filter primitives. These primitives are the building blocks of SVG filters, each performing a specific visual operation.

The key to creating grainy textures is the <feTurbulence> primitive. This primitive generates Perlin noise, a type of gradient noise that creates natural-looking textures. Perlin noise was developed by Ken Perlin in the 1980s and has been widely used in computer graphics for things like terrain generation, cloud rendering, and texture synthesis.

Here‘s a simple example of an SVG filter that uses feTurbulence to create a grainy effect:

<filter id="noise">
  <feTurbulence 
    type="fractalNoise"
    baseFrequency="0.7"
    numOctaves="5"
  />
</filter>

The type attribute specifies the noise algorithm to use. The two options are "fractalNoise" (the default) and "turbulence". Fractal noise creates a more organic, cloudy appearance, while turbulence produces a swirling, marble-like texture.

baseFrequency controls the base size or scale of the noise. Lower values create larger, coarser noise features, while higher values produce finer, more detailed noise. You can specify separate base frequencies for the X and Y dimensions using a space-separated pair of values (e.g., baseFrequency="0.5 1.2").

numOctaves determines the number of noise frequencies that are combined to create the final texture. Higher octave counts result in more intricate noise but can also be more computationally expensive.

To apply our noise filter to an SVG shape, we reference it via the filter attribute:

<rect width="100%" height="100%" filter="url(#noise)" />

Adjust the filter primitive attributes to fine-tune the appearance of the noise to your liking. Ken Perlin himself has an excellent blog post that dives into more of the technical details behind Perlin noise and the feTurbulence filter for those interested in learning more.

Creating a Grainy Background with Pure CSS

While it‘s certainly possible to create an entire grainy background in SVG by applying a noise filter to a <rect> element that matches the dimensions of the container, a more convenient approach is to use the SVG as a CSS background image instead. This allows us to leverage CSS properties like background-size and background-attachment to control how the grain appears.

Here‘s an example of a full-screen grainy background using only CSS:

body {
  background-image: url(‘data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">\
      <filter id="noise">\
        <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="4"/>\
      </filter>\
      <rect width="100%" height="100%" filter="url(#noise)" opacity="0.5"/>\
    </svg>‘);
  background-size: 200px 200px;
  background-attachment: fixed;
}

In this CSS snippet, we define an SVG background image using a data URI. The SVG consists of a noise-filtered <rect> element with 50% opacity. The background-size property scales the SVG, effectively controlling the size of the grain. A smaller size will result in a finer grain, while a larger size produces chunkier noise. Finally, background-attachment: fixed ensures that the grain stays locked in place while the content scrolls, creating an immersive textured effect.

Here‘s a CodePen demo showing this technique in action:

CodePen Demo

Layering Multiple Noise Filters for Richer Textures

For even more realistic and visually intriguing grain, we can combine multiple feTurbulence primitives with varying baseFrequency and numOctaves values. By stacking and blending different noise frequencies, we can build up rich, multi-scale textures.

Here‘s an example of a noise filter with three layered feTurbulence primitives:

<filter id="multi-noise">
  <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" result="noise1" />
  <feTurbulence type="fractalNoise" baseFrequency="2.4" numOctaves="2" result="noise2" />
  <feTurbulence type="fractalNoise" baseFrequency="4.8" numOctaves="1" result="noise3" />

  <feBlend mode="multiply" in="noise1" in2="noise2" result="blend1" />
  <feBlend mode="multiply" in="blend1" in2="noise3" />
</filter>

In this filter, we define three separate noise layers with progressively higher baseFrequency values and lower numOctaves. Each layer is assigned a result ID so that it can be referenced by subsequent filter primitives.

The <feBlend> primitives composite the noise layers together using the multiply blend mode. This darkens the overlapping areas, resulting in a grittier, more detailed texture.

Applying this layered noise filter to a fixed background produces a highly convincing grain effect:

CodePen Demo

Animating Grainy Backgrounds

One of the coolest aspects of using SVG filters for grain is that they can be animated! By dynamically changing the filter primitive attributes over time, we can create mesmerizing, living noise textures.

The simplest way to animate an SVG filter is using CSS keyframes and the animation property. For example, to create a slowly drifting grain animation, we could define the following keyframes:

@keyframes grain-drift {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

#grainy-bg {
  animation: grain-drift 10s linear infinite;
}

The grain-drift keyframes use translate() with a percentage value to smoothly move the background SVG horizontally over the course of 10 seconds. With the infinite animation iteration count, the grain will continuously drift from right to left, wrapping around seamlessly.

However, CSS animations only let us change certain SVG attributes like transform. To animate the actual filter parameters like baseFrequency, we need to use JavaScript.

The Greensock Animation Platform (GSAP) provides a powerful and intuitive way to tween SVG filter attributes. Here‘s an example of how to use GSAP to animate the baseFrequency of an feTurbulence primitive:

var turbulence = document.querySelector(‘feTurbulence‘);

gsap.to(turbulence, {
  attr: { baseFrequency: 3.5 },
  duration: 2,
  repeat: -1,
  yoyo: true
});

This code selects the feTurbulence element and uses GSAP‘s gsap.to() method to tween its baseFrequency attribute from the initial value (default is 1) to 3.5 over a duration of 2 seconds. The yoyo: true option makes the animation reverse back to the start after reaching the end, while repeat: -1 will make it loop indefinitely.

The result is a dynamic grain that subtly shifts between fine and coarse over time:

CodePen Demo

Feel free to experiment with animating different filter attributes and combining multiple animated filters for even more captivating effects!

Browser Support and Performance Considerations

SVG filters have excellent browser support, working in all modern browsers and even IE10+. However, it‘s always good practice to provide fallbacks for older browsers. We can use CSS @supports to progressively enhance our grainy backgrounds:

#grainy-element {
  background-color: #ddd;
  background-image: url(fallback-grain.png);
}

@supports (filter: url(‘#noise‘)) {
  #grainy-element {
    background-image: url(‘data:image/svg+xml;...noise filter SVG...‘);
    background-blend-mode: multiply;
  }  
}

Here, browsers that don‘t support SVG filters will fall back to a regular raster image grain (or even just a solid color). Browsers that do support filters will get the enhanced SVG grain effect.

It‘s worth noting that SVG filters are relatively computationally expensive, especially when applied to large areas or combined with other effects like animations. While modern hardware can handle SVG filters without issue in most cases, it‘s still a good idea to use them judiciously and optimize where possible.

One way to improve the performance of SVG grain is to use a smaller base image size. For example, instead of creating a full-screen 1920×1080 noise texture, you could use a 400×400 SVG and scale it up with background-size. This reduces the amount of pixel processing the browser has to do.

Another tip is to limit the number of filter primitives and numOctaves in your noise filters. A single feTurbulence with 2-3 octaves is often sufficient for most grainy effects. Stacking too many filters or using high octave counts can slow things down quickly.

Animating SVG filters can also be a performance bottleneck, particularly on lower-powered devices. Test thoroughly and provide graceful fallbacks if necessary. For example, you could detect the user‘s device capabilities and only run grain animations if certain thresholds are met.

Inspiring Examples and Use Cases

Grainy SVG backgrounds can be a great way to add subtle tactility and atmosphere to your web designs. Here are a few examples of sites and apps using grain to good effect:

Website	URL	Description
Stripe	https://stripe.com/	Payment processing platform with an SVG noise background that matches their brand colors
Netlify	https://www.netlify.com/	Web hosting service with a full-screen grain effect that slowly animates for a sense of movement
Discord	https://discord.com/	Chat app with a dark grainy background that sets a moody, immersive tone

While grain is certainly trendy in modern web design, it‘s important to use it purposefully and not just for the sake of it. Grain textures work well for:

• Bringing warmth and softness to stark, minimal layouts
• Adding visual interest to large blocks of flat color
• Creating immersive, atmospheric backgrounds (especially with dark color schemes)
• Enhancing the perceived depth and materiality of the interface

On the flip side, grain may not be appropriate in every context. Overly noisy backgrounds can distract from content, clash with other design elements, or cause accessibility issues for some users. Always consider your target audience and design goals when deciding to incorporate grain.

Conclusion

Grainy backgrounds are a visually intriguing effect that can bring a sense of depth and texture to your web designs. By leveraging the power of SVG filters, we can create resolution-independent grain that‘s easily customizable and even animatable.

The <feTurbulence> primitive is the key ingredient in crafting convincing noise textures. By fine-tuning its attributes and combining multiple noise layers, you can dial in the perfect grainy look for your project.

While SVG filters are well-supported and performant when used judiciously, it‘s still good practice to provide fallbacks for older browsers and be mindful of potential performance bottlenecks, especially on lower-end devices.

Used tastefully, grain can be a great addition to your design toolbox, adding an extra level of polish and atmosphere to your interfaces. Hopefully this deep dive has given you the knowledge and inspiration to start experimenting with SVG grain in your own projects!

Feel free to use the code examples in this post as a starting point, and don‘t be afraid to push the boundaries and come up with your own unique grainy effects. The world of SVG filters is vast and ripe for creative exploration. Happy coding!