From fb864abe8089331fa30733841d4f600734a0ef07 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 05:01:43 +0300 Subject: [PATCH] feat: fix blur --- src/components/BlurComponent/styles.scss | 58 ++++++++++++------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss index e055656..8c6eb0b 100644 --- a/src/components/BlurComponent/styles.scss +++ b/src/components/BlurComponent/styles.scss @@ -26,68 +26,68 @@ &::before { content: ""; z-index: 1; - backdrop-filter: blur(1px); - -webkit-backdrop-filter: blur(1px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); + -webkit-backdrop-filter: blur(0.5px); + backdrop-filter: blur(0.5px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%); } & > div:nth-of-type(1) { z-index: 2; - backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); - mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%); + backdrop-filter: blur(1px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%); } & > div:nth-of-type(2) { z-index: 3; - backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); - /* margin-top: 10px; */ + backdrop-filter: blur(2px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%); } & > div:nth-of-type(3) { - z-index: -7; - backdrop-filter: blur(4px); + z-index: 4; -webkit-backdrop-filter: blur(4px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); - margin-top: 20px; + backdrop-filter: blur(4px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%); } & > div:nth-of-type(4) { - z-index: -14; - backdrop-filter: blur(8px); + z-index: 5; -webkit-backdrop-filter: blur(8px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); - margin-top: 28px; + backdrop-filter: blur(8px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%); } & > div:nth-of-type(5) { - z-index: -16; - backdrop-filter: blur(16px); + z-index: 6; -webkit-backdrop-filter: blur(16px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); - margin-top: 31px; + backdrop-filter: blur(16px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%); } & > div:nth-of-type(6) { - z-index: -20; - backdrop-filter: blur(32px); + z-index: 7; -webkit-backdrop-filter: blur(32px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); - margin-top: 33px; + backdrop-filter: blur(32px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%); } &::after { content: ""; z-index: 8; + -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 87.5%, - rgba(0, 0, 0, 1) 100% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%); } } } \ No newline at end of file