Old paper background texture with just css

Question

Is it possible to create a background texture with pure CSS (without using an image) that looks like an old paper, e.g. like this: https://i.stack.imgur.com/kb0Zm.jpg

I'm aware that there are limitations, the texture does not need to be as complex as the example.

Is there a way to do this in CSS?

Check out this article: http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/ — 97ldave, Jan 29 '13 at 14:25
http://stackoverflow.com/questions/5970312/how-to-create-a-texture-paper-background-using-css-without-image — Milche Patern, Jan 29 '13 at 14:40

score 34 · Accepted Answer · edited Aug 06 '23 at 14:52

34

May I suggest my solution ? (tested on Chrome v92+, Firefox v90+, Edge v92+).

A bit of box shadow :

    #parchment {
  position: absolute;
  display: flex;
    width: 75%;
  min-height: calc((1vw + 1vh) * 75);
  /* center page with absolute position */
  top: 0%; left: 50%; transform: translate(-50%, 0);
  margin: 2em 0;
    padding: 4em;
    box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
    background: #fffef0;
  filter: url(#wavy2);
}

and a bit of SVG feTurbulence as filter :

<div id="parchment"></div>
...
<svg>
  <filter id="wavy2">
    <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="20" />
  </filter>
</svg>

exemple there : Old parchment with a mix of css and svg

edited Aug 06 '23 at 14:52

Mugen

8,301
10
62
140

answered Aug 27 '20 at 11:57

Christophe

366
3
3

I attempted to use this answer but the filter method for the borders did not work in Firefox or Safari for me. In Firefox it was laggy to load things on scroll, and on Safari the page broke entirely. – Alex W Dec 26 '20 at 23:17
Thx to report this, but I use Chrome only. I'm not an integrator so I don't need more. But I will report Chrome use only in my contribution. – Christophe Feb 11 '21 at 11:28
@Christophe this example is beautiful. Is this example / specifically are graphics licensed for lazy people to use in non-commercial projects? – pp19dd Aug 03 '21 at 15:44
@Christophe seems to work fine in FF now. (V 90.0.2) – clayRay Aug 17 '21 at 06:58
Yes and with Edge too (V 92.0.902.78). For the licence it's free to use, but I don't know if the background is free or no. – Christophe Aug 27 '21 at 00:20
I am trying to use this solution on a React app and its not working. – Walter Monecke Mar 14 '22 at 12:48

score 9 · Answer 2 · edited Oct 08 '19 at 01:05

Background Image generator site

The best I found in 2016 was this API that creates a noise texture image. It's not based on clever CSS3 but I'm just posting this since none of the other answers achieve what the OP wants anyway.

http://www.cssmatic.com/noise-texture

Note the site has the wrong output CSS code. It should be something like:

body {
    background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}

Anyone is welcome to suggest alternative parameters to that API call that look more like paper. I'll update my answer if I come up with a good one.

_{(source: thumbr.it)}

It looks decent on my personal site, and shows you just how unnatural pure white is and how uncomfortable it is on human eyes: http://netgear.rohidekar.com/inventory/books.html

score 1 · Answer 3 · answered Jan 29 '13 at 14:28

1

No, best you can do with CSS is some gradient. http://www.colorzilla.com/gradient-editor/

answered Jan 29 '13 at 14:28

MadCom

241
2
8

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

As answered here ( How to create a texture paper background using CSS without image ) Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 29 '13 at 14:42

Milche Patern

19,632
6
35
52

Old paper background texture with just css

4 Answers4

Background Image generator site