Frame shadow effect with double box shadow

frame-shadow-effect-with-double-box-shadow.markdown

Frame shadow effect with double box shadow

A Pen by Stan Williams on CodePen.

License.

index.html

<img src="https://images.unsplash.com/photo-1765127585956-f80644ac99d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjU5OTI4NzZ8&ixlib=rb-4.1.0&q=80&w=400" alt="Christmas baubles on a tree with a golden glow"/>

style.css

img {
	/* sizing & positioning */
	display: block;
	box-sizing: border-box;
	max-width: calc(100% - 50px);
	margin: auto;
	
	/* frame effect */
	border-radius: max(50px, 5vw);
	corner-shape: bevel;
	  /* where supported, this creates angled corners instead of round */
	border: 10px solid transparent;
	padding: max(20px, 2vw);
	background-image: repeating-linear-gradient(45deg, red 0 5px, gold 0 10px);
	background-clip: border-area;
	  /* where supported, this will limit the gradient
	     to the border so the padding area is transparent*/
	box-shadow:
		0 0 7px 3px black,
		/* regular shadow is outside border */		
		0 0 7px 3px black inset;
	  /* inset shadow is inside border */
}

body {
	background: midnightBlue;
}