diff --git a/css-examples/insets.css b/css-examples/insets.css
new file mode 100644
index 0000000..71a2694
--- /dev/null
+++ b/css-examples/insets.css
@@ -0,0 +1,60 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #111;
+  color: white;
+  font-family: sans-serif;
+  overflow: hidden;
+}
+
+/* Generic overlay base */
+.overlay {
+  position: absolute;
+  padding: 0.5em 1em;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 0.5em;
+  user-select: none;
+  cursor: pointer;
+}
+
+/* Corners */
+.top-left {
+  top: 1em; left: 1em;
+}
+.top-right {
+  top: 1em; right: 1em;
+}
+.bottom-left {
+  bottom: 1em; left: 1em;
+}
+.bottom-right {
+  bottom: 1em; right: 1em;
+}
+
+/* Edges */
+.top-center {
+  top: 1em; left: 50%; transform: translateX(-50%);
+}
+.bottom-center {
+  bottom: 1em; left: 50%; transform: translateX(-50%);
+}
+.left-center {
+  left: 1em; top: 50%; transform: translateY(-50%);
+}
+.right-center {
+  right: 1em; top: 50%; transform: translateY(-50%);
+}
+
+/* Center */
+.center {
+  top: 50%; left: 50%; transform: translate(-50%, -50%);
+}
diff --git a/css-examples/insets.html b/css-examples/insets.html
new file mode 100644
index 0000000..c3bb2f1
--- /dev/null
+++ b/css-examples/insets.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Insets</title>
+	<link rel="stylesheet" href="insets.css">
+</head>
+<body>
+
+
+	<div class="viewport">
+
+		<div class="overlay top-left">Corner</div>
+		<div class="overlay top-right">Corner</div>
+		<div class="overlay bottom-left">Corner</div>
+		<div class="overlay bottom-right">Corner</div>
+
+		<div class="overlay top-center">Edge</div>
+		<div class="overlay bottom-center">Edge</div>
+		<div class="overlay left-center">Edge</div>
+		<div class="overlay right-center">Edge</div>
+
+		<div class="overlay center">Center</div>
+
+	</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/css-examples/panels.css b/css-examples/panels.css
new file mode 100644
index 0000000..477ff48
--- /dev/null
+++ b/css-examples/panels.css
@@ -0,0 +1,25 @@
+.panel-container {
+  display: grid;
+  grid-template-columns: 0em 1fr 0em;
+  transition: grid-template-columns 0.3s ease;
+  height: 100vh;
+}
+
+
+.side-panel {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.left-panel {
+  border-right: 1px solid #444;
+}
+
+.right-panel {
+  border-left: 1px solid #444;
+}
+
+.center-panel {
+  background: #222;
+  color: white;
+  padding: 1em;
+}
diff --git a/css-examples/panels.html b/css-examples/panels.html
new file mode 100644
index 0000000..ae9be6d
--- /dev/null
+++ b/css-examples/panels.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Insets</title>
+	<link rel="stylesheet" href="insets.css">
+	<link rel="stylesheet" href="panels.css">
+	<style>
+		.ccw-rotated {
+			transform: rotate(-0.25turn) translate(0,-3.5em);
+		}
+		.cw-rotated {
+			transform: rotate(0.25turn) translate(0,-3.0em);	/* I don't like that I have to do an translation here, especially not assymetrically like this */
+
+		}
+
+	</style>
+	<script>
+		document.addEventListener('DOMContentLoaded', () => {
+			const pc = document.getElementById('pc');
+			const lp = document.getElementById('lp');
+			const rp = document.getElementById('rp');
+			let lp_open = false;
+			let rp_open = false;
+			document.getElementById('mm').addEventListener('click', (e) => {
+				lp_open = !lp_open;
+
+				const left = lp_open ? '20' : '0';
+				const right = rp_open ? '20' : '0';
+				pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
+
+			});
+			document.getElementById('tb').addEventListener('click', (e) => {
+				rp_open = !rp_open;
+
+				const left = lp_open ? '20' : '0';
+				const right = rp_open ? '20' : '0';
+				pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
+			});
+		});
+	</script>
+
+</head>
+<body>
+
+
+
+<div class="viewport">
+	<div class="panel-container" id="pc">
+		<div class="side-panel left-panel" id="lp">
+			<div style="width: 20em;">Left panel</div>
+		</div>
+		<div class="viewport">
+			<div class="center-panel">
+				Here be the main content
+			</div>
+			<div class="overlay left-center ccw-rotated" id="mm">Main Menu</div>
+			<div class="overlay right-center cw-rotated" id="tb">Tool Box</div>
+		</div>
+		<div class="side-panel right-panel" id="rp">
+			<div style="width: 20em;">Right panel</div>
+		</div>
+	</div>
+</div>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 9bdc6ce..32f25ed 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Simple tools</title>
+	<title>Tools and experiments</title>
 </head>
 <body>
 	<ul>
@@ -23,6 +23,14 @@
 				<li><a href="image/test1.html">Default configuration</a></li>
 			</ul>
 		</li>
+
+		<li>
+			<h2>CSS-Examples</h2>
+			<ul>
+				<li><a href="css-examples/insets.html">Insets</a></li>
+				<li><a href="css-examples/panels.html">Panels</a></li>
+			</ul>
+		</li>
 	</ul>
 
 Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a>
