scanned pdf style card

I'm back on my screenshot mimicry bs, this time with a class designed to look like a screenshot of a (slightly crunchy) scanned PDF.

Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt? Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris?

You can change the rotation, blur, and pattern offset easily by styling the element. This one has style="--rotate:-0.7deg;--blur:.05rem;--offset:70% 10%;":

code

.pdf {
	--rotate: .5deg;
	--blur: .03rem;
	--offset: 0 0;

	margin: 1em 0;
	border: 0.1rem solid rgb(221, 125, 44);
	border-radius: 0.5rem;
	font-family: 'IM Fell DW Pica', Times, serif;
	font-weight: 500;
	color: transparent;
	text-shadow: 0 0 var(--blur) #000;
	background-color: #FFF;
	position: relative;
	overflow: hidden;

	&:before {
		content: " ";
		background-image: url('/images/texture.svg');
		background-repeat: repeat;
		background-position: var(--offset);
		filter: blur(var(--blur));
		-webkit-filter: blur(var(--blur));
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
		pointer-events: none;
		transform: rotate(var(--rotate));
	}

	* {
		transform: rotate(var(--rotate));
	}

	p {
		line-height: 1.1;
		text-align: justify;
		font-size: 2cqw;
		padding: 0 2cqw;
	}

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}
}

notes

I'm using the font IM Fell DW Pica here, because I like how the slightly bumpy edges add to the vibe. The slight blur and the textured overlay are the key parts, though, so you could use pretty much any font.
I designed this so that it would very slightly cut off the edges of the text, because I think that makes it look even more like a screenshot, but if you don't like that, you could just add padding to the top and bottom of the div to account for the rotation.
The texture I used is a vector that I got in this pack of distressed textures when it was free on Creative Market...oh God, I just looked it up, and it was five years ago. Anyway bonus pro tip: Creative Market has free stuff each week; I've been lurking on and off for five whole years apparently and while I don't use most of what I've downloaded, I've gotten some real gems over the years.