Wooden Wall [CSS]

woodplanks.css

/* Wooden Wall [CSS] */
/* Originally made with ♥ by Louis Bullock https://gist.github.com/louisbullock/3120221 */
/* 2022 Updates made by Terence Eden*/

html,body {
	height: 100%;
	overflow: hidden;
}

html {
	display:block;
}

body {
	margin: 0;
	padding: 0;
}

/* Wood Gradient Overlay Shadows and Highlights */
html:before {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 4;
	display: block;
	content: "";
	background-image: 
		linear-gradient(90deg, rgba(255,255,255,.014) 50%, transparent 50%), 
		linear-gradient(90deg, rgba(255,255,255,.015) 50%, transparent 50%), 
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.02) 50%), 
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.02) 50%);
	background-size: 1rem, 2rem, 1.3rem, 2.4rem;
}

/* Wood Base Gradient */
body {
	background-image: radial-gradient(#D1A46B,#B57744);
	background-size: 100%;
}

/* Planks */
body::before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
	position: absolute;
	background-image: 
		linear-gradient(90deg,transparent 97%, rgba(214, 171, 119, 0.5) 97%), 
		linear-gradient(90deg,transparent 93%, rgba(173, 97, 54, 0.45) 93%), 
		linear-gradient(90deg,transparent 97%, rgba(214, 171, 119, 0.9) 97%);
	background-size: 10%; /* Ensures 10 planks. Can be set to px, rem, etc for different layout */
}