This is not your typical texture review for websites or resources, where you can download and browse a selection. And we won’t talk about how to create textures yourself, draw them, or edit a photo of a floor tile. We’ve already covered that — more than once.
But if you’re planning to use a texture or are simply wondering how to choose one for a specific project, you've probably asked yourself whether there are any tricks, nuances, or general rules when selecting a drawn background that matches a website’s theme or style. That’s exactly what we’ll explore today.
While there are many ways to use textures in web design, you can get much better results — and save a lot of time — by following a more modern approach. Especially considering that in 2018, textures have taken center stage and become a top priority.
Simplicity and Subtlety
Some readers may think, how can web designers be talking about subtlety and restraint? Isn’t design supposed to be bright, memorable, and impressive? But great design is when users don’t even notice it — and that applies even more to textures. They can be nearly invisible elements that improve readability and usability, adding depth or visual interest without drawing attention.
Simple and subtle background textures are perfect for understated designs. For example, the Github's Universe Conference site (for an event held at the end of last year) uses a black background with barely visible white specks, mimicking a starry sky. The texture adds depth to the layout while highlighting the logo, header, and navigation elements without taking center stage.
These subtle textures are distinctive because of their faint patterns and adaptable colors — but they’re never meant to grab attention. Users aren’t supposed to focus on them. Their only purpose is to emphasize other interface elements — blocks, sections, text — and that’s it.
Similar barely-noticeable textures were used by thetestcenter, varyavega, voltfordrive, dreamsdesign, and smithinst. In some cases, the textures were animated — but so subtly that they barely caught the user’s eye. On other sites, textures were applied only to specific landing page sections rather than the entire background.
Big and Bold
Maybe subtlety isn’t your thing? Then consider bold, oversized texture patterns. These scaled-up textures look great when the foreground is visually heavy and there are no other images. It’s tricky to use these: you want your background to look like tiles or bricks — but not distract from interface elements. The texture should never become the visual focal point.
Success here depends on how well you understand your users. Try putting yourself in their shoes. Do you and your friends actually like the design? Is it convenient to use the site? If traffic drops or conversions fall — that’s your sign something’s off visually, and users are bouncing.
Examples of bold textures include dogbreedcartoon, studiorevele, tirrenascavi, and geex-arts. In most cases, they use dense geometric shapes scattered across the canvas. If combined with more graphics, it would be visual chaos. Instead, these layouts layer only text or fine arrows over the texture — making everything readable and balanced.
Trendy Texture
A texture created following the latest design trends in web design can instantly make a site look modern and fresh. Geometry, bright colors, and gradients are the trends of 2018 — and naturally, the apacio website looks incredibly stylish and engaging. The combo of colorful geometric shapes on a dark background creates a pleasant texture and depth, helping users focus on bold headlines and calls to action that pop sharply against the background. Notice the sans-serif headline font, subtle shadow — and you’ve got a 3D-like illusion that makes the text appear lifted from the background.
Texture interplay also contributes to this effect. Duller, more muted shapes seem to recede into the background. Brighter, bolder elements move forward, with text and buttons resting on top. Yes, it’s trendy. And yes — it’s simply beautiful.
The same can be said of brontidebg, where scattered leaf elements help create depth; twotwentytwo, where large interactive background elements overlap with text; namethatplace, makeitdriveable, and republic.
Image as Texture
Another trend — with some caveats — is using a single, non-repeating image as a texture. These are often photos (or videos) placed in the background and chosen to align with the site’s theme, brand, or message. They create an added layer of visual richness and engagement.
The trick lies in how you display the image. Simply muting the brightness or applying color filters isn’t always enough. But this often helps achieve a sense of depth and multi-layered design.
Examples include oxeva, valnetinc, okkapi, papertiger, theshift. Each uses a single full-screen image with effects like dark overlays, masks, animation, and even stencil-style logos on top. Sometimes the photo is blurred, other times it’s highly detailed — all depending on how the image connects to the site’s purpose.
Either way, the background image appears only once, doesn’t repeat, but is enhanced by subtle graphic touches to make it more vivid and captivating.
Color Blending
Combining shades and tones within a color palette is another way to create engaging background texture. These textures can be bold, vivid, and support both text and minimal graphics. Even a simple color variation within your palette can add depth and visual appeal — but be careful not to overdo it. You don’t want the background stealing focus from the content.
One great example is typesoftype, where colors mix with oversized letters to form a geometric pattern. No shadows or gradients, just strong letterforms creating motion, depth, and balance — drawing the user’s eye to the headline instead of scrolling past it.
Another nice take on color blending is hotel-frida, where splashes of color in the background keep it from looking empty but still match the site’s style. Meanwhile, dtofilms introduces purple squares mid-scroll to create a pseudo-textured effect.
