tw-glass 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +110 -0
- package/package.json +46 -0
- package/src/index.css +162 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 AgentbaseAI Inc.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# tw-glass
|
|
2
|
+
|
|
3
|
+
Tailwind CSS v4 plugin for glass refraction effects. Pure CSS, no JavaScript.
|
|
4
|
+
|
|
5
|
+
Uses inline SVG displacement maps with `filterUnits="objectBoundingBox"` so refraction scales with element size automatically.
|
|
6
|
+
|
|
7
|
+
[Live demo & docs](https://www.assistant-ui.com/tw-glass)
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install tw-glass
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import in your CSS:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tw-glass";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Requires Tailwind CSS v4+.
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### Glass refraction
|
|
26
|
+
|
|
27
|
+
Add `glass` to any element with content behind it:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<div class="glass rounded-xl p-6">
|
|
31
|
+
Content with refracted backdrop
|
|
32
|
+
</div>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Pair with `glass-surface` for a frosted panel look:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<div class="glass glass-surface rounded-xl p-6">
|
|
39
|
+
Frosted glass panel
|
|
40
|
+
</div>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Refraction strength
|
|
44
|
+
|
|
45
|
+
Control displacement intensity:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<div class="glass glass-strength-5">Subtle</div>
|
|
49
|
+
<div class="glass glass-strength-20">Default</div>
|
|
50
|
+
<div class="glass glass-strength-50">Heavy</div>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Available: `glass-strength-5`, `10`, `20`, `30`, `40`, `50`.
|
|
54
|
+
|
|
55
|
+
### Chromatic aberration
|
|
56
|
+
|
|
57
|
+
Split RGB channels for a prism effect:
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div class="glass glass-chromatic-10">Prismatic</div>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Available: `glass-chromatic-5`, `10`, `20`, `30`, `40`, `50`.
|
|
64
|
+
|
|
65
|
+
### Backdrop tuning
|
|
66
|
+
|
|
67
|
+
Fine-tune blur, saturation, and brightness:
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<div class="glass glass-blur-4 glass-saturation-150 glass-brightness-110">
|
|
71
|
+
Custom backdrop
|
|
72
|
+
</div>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
- `glass-blur-{n}` -- blur in px (default: 2)
|
|
76
|
+
- `glass-saturation-{n}` -- percentage (default: 120)
|
|
77
|
+
- `glass-brightness-{n}` -- percentage (default: 105)
|
|
78
|
+
|
|
79
|
+
### Surface opacity
|
|
80
|
+
|
|
81
|
+
Control the frosted surface background opacity:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<div class="glass glass-surface glass-bg-12">
|
|
85
|
+
12% white overlay
|
|
86
|
+
</div>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
`glass-bg-{n}` sets opacity as percentage (default: 8).
|
|
90
|
+
|
|
91
|
+
### Glass text
|
|
92
|
+
|
|
93
|
+
Clip a background image to the text shape:
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<h1
|
|
97
|
+
class="glass-text"
|
|
98
|
+
style="background-image: url(photo.jpg); background-attachment: fixed"
|
|
99
|
+
>
|
|
100
|
+
Glass heading
|
|
101
|
+
</h1>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Browser support
|
|
105
|
+
|
|
106
|
+
Works in all browsers that support `backdrop-filter` with SVG filter references (Chrome, Edge, Safari, Firefox).
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
MIT
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tw-glass",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Tailwind CSS v4 plugin for glass refraction effects via SVG displacement maps",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"tailwindcss",
|
|
7
|
+
"tailwind",
|
|
8
|
+
"glass",
|
|
9
|
+
"glassmorphism",
|
|
10
|
+
"refraction",
|
|
11
|
+
"displacement",
|
|
12
|
+
"backdrop-filter",
|
|
13
|
+
"css"
|
|
14
|
+
],
|
|
15
|
+
"author": "AgentbaseAI Inc.",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"type": "module",
|
|
18
|
+
"exports": {
|
|
19
|
+
".": {
|
|
20
|
+
"default": "./src/index.css"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"main": "./src/index.css",
|
|
24
|
+
"files": [
|
|
25
|
+
"src",
|
|
26
|
+
"README.md"
|
|
27
|
+
],
|
|
28
|
+
"sideEffects": [
|
|
29
|
+
"./src/index.css"
|
|
30
|
+
],
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"tailwindcss": ">=4.0.0-0"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://www.assistant-ui.com/tw-glass",
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/assistant-ui/assistant-ui.git",
|
|
41
|
+
"directory": "packages/tw-glass"
|
|
42
|
+
},
|
|
43
|
+
"bugs": {
|
|
44
|
+
"url": "https://github.com/assistant-ui/assistant-ui/issues"
|
|
45
|
+
}
|
|
46
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* tw-glass — Tailwind CSS v4 plugin for glass refraction effects
|
|
3
|
+
*
|
|
4
|
+
* Uses SVG displacement maps with filterUnits="objectBoundingBox" to create
|
|
5
|
+
* glass-like refraction that scales with element size. No JavaScript, no
|
|
6
|
+
* companion components — just CSS classes.
|
|
7
|
+
*
|
|
8
|
+
* Usage:
|
|
9
|
+
* @import "tw-glass";
|
|
10
|
+
*
|
|
11
|
+
* <div class="glass"> <!-- default refraction -->
|
|
12
|
+
* <div class="glass glass-strength-40"> <!-- stronger -->
|
|
13
|
+
* <div class="glass glass-chromatic-20"> <!-- RGB splitting -->
|
|
14
|
+
* <div class="glass glass-blur-4"> <!-- custom blur (px) -->
|
|
15
|
+
* <div class="glass glass-saturation-150"> <!-- 150% saturation -->
|
|
16
|
+
* <div class="glass glass-brightness-110"> <!-- 110% brightness -->
|
|
17
|
+
* <div class="glass glass-surface"> <!-- frosted surface -->
|
|
18
|
+
* <h1 class="glass-text"> <!-- glass text effect -->
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
/* ── Custom Properties ──────────────────────────────────────── */
|
|
22
|
+
|
|
23
|
+
@property --tw-glass-blur {
|
|
24
|
+
syntax: "<length>";
|
|
25
|
+
inherits: false;
|
|
26
|
+
initial-value: 2px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@property --tw-glass-brightness {
|
|
30
|
+
syntax: "<number>";
|
|
31
|
+
inherits: false;
|
|
32
|
+
initial-value: 1.05;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@property --tw-glass-saturation {
|
|
36
|
+
syntax: "<number>";
|
|
37
|
+
inherits: false;
|
|
38
|
+
initial-value: 1.2;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@property --glass-bg-opacity {
|
|
42
|
+
syntax: "<number>";
|
|
43
|
+
inherits: true;
|
|
44
|
+
initial-value: 0.08;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ── Base Glass Utility ─────────────────────────────────────── */
|
|
48
|
+
|
|
49
|
+
@utility glass {
|
|
50
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.1%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
51
|
+
--tw-backdrop-blur: var(--tw-glass-filter) blur(var(--tw-glass-blur));
|
|
52
|
+
--tw-backdrop-brightness: brightness(var(--tw-glass-brightness));
|
|
53
|
+
--tw-backdrop-saturate: saturate(var(--tw-glass-saturation));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Companion rule — @layer components is not stripped by Tailwind v4 */
|
|
57
|
+
@layer components {
|
|
58
|
+
.glass {
|
|
59
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
60
|
+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ── Surface Styling (compose with "glass") ────────────────── */
|
|
65
|
+
|
|
66
|
+
@utility glass-surface {
|
|
67
|
+
background: rgb(255 255 255 / var(--glass-bg-opacity));
|
|
68
|
+
box-shadow:
|
|
69
|
+
inset 0 0 0 1px rgb(255 255 255 / 0.15),
|
|
70
|
+
inset 0 1px 0 rgb(255 255 255 / 0.25),
|
|
71
|
+
0 8px 32px rgb(0 0 0 / 0.12);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ── Displacement Strength ──────────────────────────────────── */
|
|
75
|
+
|
|
76
|
+
@utility glass-strength-5 {
|
|
77
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.03%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@utility glass-strength-10 {
|
|
81
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.05%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@utility glass-strength-20 {
|
|
85
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.1%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@utility glass-strength-30 {
|
|
89
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.15%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@utility glass-strength-40 {
|
|
93
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.2%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@utility glass-strength-50 {
|
|
97
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.25%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* ── Chromatic Aberration (RGB channel splitting) ──────────── */
|
|
101
|
+
|
|
102
|
+
@utility glass-chromatic-5 {
|
|
103
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.042%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.036%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.03%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@utility glass-chromatic-10 {
|
|
107
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.07%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.06%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.05%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@utility glass-chromatic-20 {
|
|
111
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.14%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.12%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.1%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@utility glass-chromatic-30 {
|
|
115
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.21%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.18%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.15%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@utility glass-chromatic-40 {
|
|
119
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.28%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.24%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.2%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@utility glass-chromatic-50 {
|
|
123
|
+
--tw-glass-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20filterUnits%3D%22objectBoundingBox%22%20primitiveUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeImage%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IngiIHgxPSI1JSIgeTE9IjAiIHgyPSI5NSUiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjAwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InkiIHgxPSIwIiB5MT0iNSUiIHgyPSIwIiB5Mj0iOTUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEYwIi8%2BPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8%2BPC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvYiI%2BPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8%2BPC9maWx0ZXI%2BPGZpbHRlciBpZD0iaWIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz48L2ZpbHRlcj48L2RlZnM%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM4MDgwODAiLz48ZyBmaWx0ZXI9InVybCgjb2IpIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3kpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c2NyZWVuIi8%2BPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjeCkiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzY3JlZW4iLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iODQiIGhlaWdodD0iODQiIHJ4PSI0IiByeT0iNCIgZmlsbD0iIzgwODA4MCIgZmlsdGVyPSJ1cmwoI2liKSIvPjwvZz48L3N2Zz4%3D%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%20result%3D%22map%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.35%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%221%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dR%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.3%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22dG%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22map%22%20scale%3D%220.25%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%201%200%200%200%200%200%201%200%22%20result%3D%22dB%22%2F%3E%3CfeBlend%20in%3D%22dR%22%20in2%3D%22dG%22%20mode%3D%22screen%22%20result%3D%22rg%22%2F%3E%3CfeBlend%20in%3D%22rg%22%20in2%3D%22dB%22%20mode%3D%22screen%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#f");
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* ── Continuous Modifiers ───────────────────────────────────── */
|
|
127
|
+
|
|
128
|
+
@utility glass-blur-* {
|
|
129
|
+
--tw-glass-blur: calc(--value(number) * 1px);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@utility glass-saturation-* {
|
|
133
|
+
--tw-glass-saturation: calc(--value(number) / 100);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@utility glass-brightness-* {
|
|
137
|
+
--tw-glass-brightness: calc(--value(number) / 100);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@utility glass-bg-* {
|
|
141
|
+
--glass-bg-opacity: calc(--value(integer) * 0.01);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ── Glass Text Effect ─────────────────────────────────────── */
|
|
145
|
+
/*
|
|
146
|
+
* Shows a background image through the text shape, like looking through
|
|
147
|
+
* glass letters. Set `background-image` on the element and use
|
|
148
|
+
* `background-attachment: fixed` for a parallax-window effect.
|
|
149
|
+
*
|
|
150
|
+
* Usage:
|
|
151
|
+
* <h1 class="glass-text" style="background-image: url(photo.jpg)">
|
|
152
|
+
* tw-glass
|
|
153
|
+
* </h1>
|
|
154
|
+
*/
|
|
155
|
+
|
|
156
|
+
@utility glass-text {
|
|
157
|
+
color: transparent;
|
|
158
|
+
-webkit-background-clip: text;
|
|
159
|
+
background-clip: text;
|
|
160
|
+
background-size: cover;
|
|
161
|
+
background-position: center;
|
|
162
|
+
}
|