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?

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