From fdebfa3d92a819e2f7625d9017cbb29e0f35fa0a Mon Sep 17 00:00:00 2001
From: k <markers711@gmail.com>
Date: Thu, 5 Dec 2024 12:53:22 -0500
Subject: [PATCH] Glass && Sunset

---
 glass/glass.css    |  7 +++++++
 glass/glass.html   |  7 +++++++
 sunset/sunset.css  | 30 ++++++++++++++++++++++++++++++
 sunset/sunset.html |  3 +++
 4 files changed, 47 insertions(+)
 create mode 100644 glass/glass.css
 create mode 100644 glass/glass.html
 create mode 100644 sunset/sunset.css
 create mode 100644 sunset/sunset.html

diff --git a/glass/glass.css b/glass/glass.css
new file mode 100644
index 0000000..f56bac0
--- /dev/null
+++ b/glass/glass.css
@@ -0,0 +1,7 @@
+.glass {
+	background: rgba(128, 128, 128, 0.35);
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	border-radius: 3em;
+	padding: 1em 2em;
+        backdrop-filter: blur(2px);
+}
diff --git a/glass/glass.html b/glass/glass.html
new file mode 100644
index 0000000..6071f83
--- /dev/null
+++ b/glass/glass.html
@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="glass.css">
+<div class=glass style="position: absolute;">
+  <p>demo txt</p>
+</div>
+<p> Under Demo Under Demo Under Demo Under Demo</p>
+<p>Under Demo Under Demo Under Demo</p>
+<p>Under Demo Under Demo Under Demo Under Demo Under Demo</p>
diff --git a/sunset/sunset.css b/sunset/sunset.css
new file mode 100644
index 0000000..bbc3f7c
--- /dev/null
+++ b/sunset/sunset.css
@@ -0,0 +1,30 @@
+:root{
+    --ColorA: pink;
+    --ColorB: purple;
+}
+
+.sunset {
+	background: linear-gradient(45deg, var(--ColorA) 2%, var(--ColorB));
+	margin: 0px;
+	animation: gradient 35s linear infinite;
+	background-size: 180% 180%;
+	height: 100vh;
+	width: 100vw;
+	position: fixed;
+	z-index: -1;
+	top:0;
+	left:0;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
diff --git a/sunset/sunset.html b/sunset/sunset.html
new file mode 100644
index 0000000..77f5fac
--- /dev/null
+++ b/sunset/sunset.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="sunset.css">
+<div class=sunset></div>
+<p>demo txt</p>