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: http://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?

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 :

<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