webHTML/maskedGradient.html at main · error420notfound/webHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Blur Effect</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        .frame {
            display: block;
            flex: 0 0 auto;
            pointer-events: none;
            position: relative;
            border-radius: 0px;
            overflow-x: visible;
            overflow-y: visible;
            height: 100%;
            width: 100%;
            transform: none;
        }


        .layer {
            position: absolute;
            inset: 0;
            height: 100%;
            width: 100%;
            border-radius: 0px;
        }
    </style>
</head>
<body>
    <div class="frame" style="z-index: 11;">
        <div class="layer" style="background-color: #fef4ee; backdrop-filter: blur(0px);                 -webkit-backdrop-filter: blur(0px);                 mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%); z-index: 1;"></div>
        <div class="layer" style="background-color: #fde7d7; backdrop-filter: blur(0.205761316872428px); -webkit-backdrop-filter: blur(0.205761316872428px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 30%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 30%); z-index: 2;"></div>
        <div class="layer" style="background-color: #f9caaf; backdrop-filter: blur(0.823045267489712px); -webkit-backdrop-filter: blur(0.823045267489712px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 40%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 40%); z-index: 3;"></div>
        <div class="layer" style="background-color: #f5a57c; backdrop-filter: blur(1.8518518518518516px); -webkit-backdrop-filter: blur(1.8518518518518516px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%); z-index: 4;"></div>
        <div class="layer" style="background-color: #f07647; backdrop-filter: blur(3.292181069958848px); -webkit-backdrop-filter: blur(3.292181069958848px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%); z-index: 5;"></div>
        <div class="layer" style="background-color: #ed5829; backdrop-filter: blur(5.144032921810701px); -webkit-backdrop-filter: blur(5.144032921810701px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 70%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 70%); z-index: 6;"></div>
        <div class="layer" style="background-color: #de3a18; backdrop-filter: blur(7.4074074074074066px); -webkit-backdrop-filter: blur(7.4074074074074066px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 80%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 80%); z-index: 7;"></div>
        <div class="layer" style="background-color: #b82916; backdrop-filter: blur(10.082304526748972px); -webkit-backdrop-filter: blur(10.082304526748972px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 90%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 90%); z-index: 8;"></div>
        <div class="layer" style="background-color: #92241a; backdrop-filter: blur(13.168724279835391px); -webkit-backdrop-filter: blur(13.168724279835391px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%); z-index: 9;"></div>
        <div class="layer" style="background-color: #762018; backdrop-filter: blur(16.666666666666668px); -webkit-backdrop-filter: blur(16.666666666666668px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 1) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 1) 100%); z-index: 10;"></div>


    </div>
</body>
</html>