From 1ac7db249bd72d18befb91f3ce4f75a06d209340 Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Tue, 1 Nov 2022 20:17:15 -0700 Subject: [PATCH] Add gradient border on header --- style.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 67752be..ef77766 100644 --- a/style.css +++ b/style.css @@ -17,7 +17,27 @@ header { padding-block: 1rem; margin-inline: auto; margin-block-end: 1rem; - border-block-end: 1px hsl(216deg 100% 80%) solid; + position: relative; +} + +header::after { + content: ""; + position: absolute; + bottom: -4px; + left: 5%; + inline-size: 90%; + block-size: 2px; + --shade: 50% 70%; + background: linear-gradient(90deg, + hsl(360deg var(--shade)), + hsl(315deg var(--shade)), + hsl(270deg var(--shade)), + hsl(225deg var(--shade)), + hsl(180deg var(--shade)), + hsl(135deg var(--shade)), + hsl(90deg var(--shade)), + hsl(45deg var(--shade)), + hsl(0deg var(--shade))); } header * { -- 2.47.3