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.sstatic.net/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?

Butyraceous

Check out this article: designshack.net/articles/css/… – Emotionality

lea.verou.me/css3patterns – Cannot

#5970812 – Cannot

Answer 1

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

Wafd

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. – Pericranium

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. – Wafd

@Wafd this example is beautiful. Is this example / specifically are graphics licensed for lazy people to use in non-commercial projects? – Sordid

@Wafd seems to work fine in FF now. (V 90.0.2) – Digress

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. – Wafd

I am trying to use this solution on a React app and its not working. – Syncretize

that's pretty incredible work. appreciate the share. – Communard

Updated to v2.3 : just folds added. – Wafd

My guy, you are a genius, thank you for this. I am truly amazed by your skill and like the above user said, thankful for the share. – Monomer

Answer 2

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

Cryan

Answer 3

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

Tweedsmuir

Answer 4

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.

Cannot