Paper texture backgrounds: tactile designs on screen

A paper texture background makes a screen design feel printed, tactile and made by hand. It works because people read paper as care: an invitation, a letter, a menu someone chose a stock for. To get it right you need three layers working together, a warm or tinted base colour, a fine fibre or grain, and light that is a little uneven across the sheet. Most fake paper fails by overdoing the third one.

Which paper look suits your design

Paper is not one texture. Cotton rag, kraft, newsprint and washi feel completely different, and each suits a different kind of brand. Start by naming the stock you are imitating.

How to make a paper texture background

You can build convincing paper from scratch in any editor that has noise and blend modes. Scanned paper works too, but a built texture scales cleanly to any size and never shows the edge of a scanner bed.

1. 1

   Fill the base

   Fill the canvas with your paper colour from the table, for example #f3ead8 for uncoated cream.

2. 2

   Add fine tooth

   Add a mid grey layer, apply monochrome noise, set it to Multiply or Soft Light at about 4 to 8 percent. This is the surface grain every paper has.

3. 3

   Add fibre

   Add a second, larger noise layer and stretch or blur it slightly in one direction. At very low opacity it reads as fibres running through the sheet.

4. 4

   Make the light uneven

   Add a soft radial fade, a touch lighter in one corner and a touch deeper in the opposite one. Real paper is never lit perfectly evenly.

5. 5

   Check the ink

   Place your smallest text on top and view it on a phone. If any word is harder to read, reduce the texture before anything else.

The fine tooth in step two is the same technique explained in grain texture. Paper simply uses less of it, with a warmer base.

Subtle paper beats fake paper

Search results for paper backgrounds are full of crumpled sheets, burnt edges and coffee rings. They look like a theme park version of paper and fight every word you put on them. A good paper texture is quiet enough that people feel it before they see it.

Paper texture ideas for real designs

Paper is at its best where a printed object would naturally exist. These are the places it earns its keep.

• Restaurant menus on uncoated cream, set in a serif. See restaurant menu design.
• Newsletters and journals, where paper makes long reading feel calmer.
• Wedding and event invitations; wedding invitation design has layouts.
• Craft and handmade brands, on kraft or recycled grey.
• Quote cards, where a single line on paper feels like a note someone wrote.

Type and ink on paper backgrounds

Paper changes how type reads. Serifs feel at home on cream and cotton because they were drawn for print; a clean sans on newsprint or recycled grey feels modern and slightly industrial. Serif vs sans serif explains the trade. Whichever you pick, set ink in a warm near black such as #2b2420 rather than pure black, which looks digital against a tinted sheet.

Keep body text at a comfortable size and give it more weight than you would on white: texture eats a little contrast, especially on phones. For short lines on paper, such as a single sentence on a quote card, you can afford a lighter weight and more space. If you are weighing paper against other surfaces, background texture compares the main families side by side.

Paper texture in CSS

For a website, layer an uneven light gradient over the base colour, then add a very light noise layer with SVG. A lower baseFrequency than you would use for film grain gives a softer, more fibrous feel.

.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}

Gradiently has paper and sand materials among its Marks: handmade fibre, soft washes and fine drifting grain rendered live at every size, with the calmest part of the sheet moving behind your words. Search the Market for "paper" or filter by a light ground to find one, then design with it for free.