Fine tuning an old-paper background

Today I managed to realize a background for my blockquote elements quite good (you can see here, the last blockquote).
But I wonder if (and how) I could refine this even better. I mean, in particular, how to get with css, the borders the more like to this example, that is so to say irregular (in Italian I would say “frastagliato”). As in above example.

That’s using an SVG filter to get the irregular border. Do a search for wavy2 in the html and css to see how they applied it.

Try it on your site to see how far you get…


This is how far I got :slight_smile:

It wasn’t as straight forward as it seemed.

1 Like

Therefore, I have to add an inline svg every time I want to apply that style? I cannot link it (preferably adding it to a css rule)?

No you only need the one svg on each page. You can call it multiple times.


ok, thank you very much. I can do this, adding this to my footer.
A last question: the bottom-border is, so to say, to “violent”: how could I make it more similar to the other three (left, right and top)?
I mean, a bit more regular.

Try changing the scale=20 to 10 in the svg code.

I’m not sure you can change one side but it looks more accentuated because of the box shadow I think.

1 Like

Yes, changing scale from 20 to 10 helps.
But the top (and the left) border - now and before this change - is somehow “cut”.
I don’t understand why…

Is this any better? I just played around a bit.



Thank you. Sorry, but with all my (css) code your appreciated efforts seems don’t work.
It remain that the the top and the left border are cut (by a line)…
I however can upload the new style, so that if you want, you can see it (here) in its whole ‘context’.


I noticed another (little) problem: with a svg at the bottom of a page, I have there an empty space.
With display: none, the effect goes…

You should hide the default svg off screen instead. e.g. position:fixed;left -999rem;top:-999rem;

In my example I only used the inset box-shadow and then used a drop-shadow on the filter for a better effect.


Mine in your page:

You don’t seem to have used the noise svg which makes the whole thing look better IMO.

perfect! This is solved!

Indeed, no, I didn’t. It a “taste” question :slight_smile:
But I see that even adding that noise the problem remain…
It seems a problem of padding (left and top)…

Modifying the svg (feTurbulence x="2" y="2") something is better…

1 Like

Yes , I think you will just have to fine tune it until it suits your eye :slight_smile:

1 Like

Thank you!