Glassmorphism Generator<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react@18.0.0\/umd\/react.development.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react-dom@18.0.0\/umd\/react-dom.development.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@babel\/standalone\/babel.js\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n font-family: system-ui, sans-serif;\r\n background-color: #121212;\r\n color: #fff;\r\n margin: 0;\r\n padding: 20px;\r\n }\r\n \r\n .glass-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n direction: rtl;\r\n }\r\n \r\n .glass-panel {\r\n display: flex;\r\n background: #000;\r\n border-radius: 32px;\r\n overflow: hidden;\r\n box-shadow: 0 30px 90px rgba(0,0,0,0.9);\r\n gap: 0;\r\n }\r\n \r\n .controls {\r\n width: 380px;\r\n background: #111;\r\n padding: 40px 32px;\r\n color: #eee;\r\n }\r\n \r\n .preview {\r\n flex: 1;\r\n min-height: 720px;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 40px;\r\n }\r\n \r\n .gradient-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #fb5607, #ffbe0b);\r\n background-size: 600%;\r\n animation: gradientShift 18s ease infinite;\r\n z-index: -1;\r\n }\r\n \r\n @keyframes gradientShift {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n .glass-card {\r\n width: 460px;\r\n padding: 50px 40px;\r\n background: rgba(255,255,255,0.28);\r\n backdrop-filter: blur(22px);\r\n -webkit-backdrop-filter: blur(22px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n border-radius: 34px;\r\n box-shadow: 0 30px 70px rgba(0,0,0,0.7);\r\n text-align: center;\r\n color: white;\r\n cursor: move;\r\n user-select: none;\r\n position: relative;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .glass-card h3 {\r\n color: #00ff9d;\r\n font-size: 2.1rem;\r\n margin-bottom: 16px;\r\n }\r\n \r\n .glass-card p {\r\n font-size: 1.2rem;\r\n line-height: 1.8;\r\n }\r\n \r\n .control-group {\r\n margin: 20px 0;\r\n }\r\n \r\n .control-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n \r\n .slider {\r\n width: 100%;\r\n height: 10px;\r\n border-radius: 10px;\r\n background: #333;\r\n margin-top: 8px;\r\n }\r\n \r\n .color-input {\r\n width: 100%;\r\n height: 52px;\r\n border: none;\r\n border-radius: 14px;\r\n margin-top: 8px;\r\n }\r\n \r\n .checkbox-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 20px 0;\r\n }\r\n \r\n .copy-btn {\r\n width: 100%;\r\n padding: 18px;\r\n background: #00ff9d;\r\n color: #000;\r\n border: none;\r\n border-radius: 18px;\r\n font-weight: bold;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n margin-top: 30px;\r\n transition: background 0.3s;\r\n }\r\n \r\n .copy-btn:hover {\r\n background: #00cc8a;\r\n }\r\n \r\n .code-display {\r\n margin-top: 50px;\r\n width: 90%;\r\n max-width: 900px;\r\n background: #000;\r\n color: #00ff9d;\r\n padding: 30px;\r\n border-radius: 20px;\r\n font-family: monospace;\r\n direction: ltr;\r\n text-align: left;\r\n white-space: pre-wrap;\r\n border: 1px solid #333;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.8);\r\n user-select: all;\r\n }\r\n \r\n \/* Noise overlay *\/\r\n .noise-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.09'\/%3E%3C\/svg%3E\");\r\n mix-blend-mode: overlay;\r\n pointer-events: none;\r\n border-radius: inherit;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"glass-container\">\r\n <div class=\"glass-panel\">\r\n \r\n <div class=\"controls\">\r\n <h3 style=\"color: #00ff9d; text-align: center; margin-bottom: 30px; font-size: 1.8rem;\">Glassmorphism Generator<\/h3>\r\n \r\n <div class=\"control-group\">\r\n <label class=\"control-label\">\u0628\u0644\u0648\u0631 (px)<\/label>\r\n <input type=\"range\" id=\"blurRange\" min=\"0\" max=\"60\" value=\"22\" class=\"slider\">\r\n <\/div>\r\n \r\n <div class=\"control-group\">\r\n <label class=\"control-label\">\u0634\u0641\u0627\u0641\u06cc\u062a<\/label>\r\n <input type=\"range\" id=\"opacityRange\" min=\"0\" max=\"100\" value=\"28\" class=\"slider\">\r\n <\/div>\r\n \r\n <div class=\"control-group\">\r\n <label class=\"control-label\">\u0631\u0646\u06af<\/label>\r\n <input type=\"color\" id=\"colorPicker\" value=\"#ffffff\" class=\"color-input\">\r\n <\/div>\r\n \r\n <div class=\"control-group\">\r\n <label class=\"control-label\">\u062d\u0627\u0634\u06cc\u0647<\/label>\r\n <input type=\"range\" id=\"borderRange\" min=\"0\" max=\"10\" value=\"1\" class=\"slider\">\r\n <\/div>\r\n \r\n <div class=\"control-group\">\r\n <label class=\"control-label\">\u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647<\/label>\r\n <input type=\"range\" id=\"radiusRange\" min=\"0\" max=\"100\" value=\"34\" class=\"slider\">\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"shadowCheck\" checked>\r\n <label for=\"shadowCheck\">\u0633\u0627\u06cc\u0647<\/label>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"noiseCheck\" checked>\r\n <label for=\"noiseCheck\">\u0646\u0648\u06cc\u0632<\/label>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"safariCheck\" checked>\r\n <label for=\"safariCheck\">\u0633\u0627\u0641\u0627\u0631\u06cc<\/label>\r\n <\/div>\r\n \r\n <button id=\"copyBtn\" class=\"copy-btn\">\u06a9\u067e\u06cc \u06a9\u062f CSS<\/button>\r\n <\/div>\r\n \r\n \r\n <div class=\"preview\">\r\n <div class=\"gradient-bg\"><\/div>\r\n \r\n <div id=\"glassCard\" class=\"glass-card\">\r\n <h3>Glass Card<\/h3>\r\n <p>\u0627\u06cc\u0646 \u06a9\u0627\u0631\u062a \u0631\u0648 \u0628\u0627 \u0645\u0648\u0633 \u06cc\u0627 \u0627\u0646\u06af\u0634\u062a \u0628\u06a9\u0634!<\/p>\r\n \r\n \r\n <div id=\"noiseOverlay\" class=\"noise-overlay\" style=\"display: none;\"><\/div>\r\n <\/div>\r\n \r\n <pre id=\"cssCode\" class=\"code-display\"><\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Get DOM elements\r\n const glassCard = document.getElementById('glassCard');\r\n const cssCode = document.getElementById('cssCode');\r\n const blurRange = document.getElementById('blurRange');\r\n const opacityRange = document.getElementById('opacityRange');\r\n const colorPicker = document.getElementById('colorPicker');\r\n const borderRange = document.getElementById('borderRange');\r\n const radiusRange = document.getElementById('radiusRange');\r\n const shadowCheck = document.getElementById('shadowCheck');\r\n const noiseCheck = document.getElementById('noiseCheck');\r\n const safariCheck = document.getElementById('safariCheck');\r\n const copyBtn = document.getElementById('copyBtn');\r\n const noiseOverlay = document.getElementById('noiseOverlay');\r\n\r\n \/\/ Drag functionality\r\n let isDragging = false;\r\n let startX, startY;\r\n\r\n glassCard.addEventListener('mousedown', startDrag);\r\n glassCard.addEventListener('touchstart', startDrag);\r\n\r\n document.addEventListener('mousemove', drag);\r\n document.addEventListener('touchmove', drag);\r\n\r\n document.addEventListener('mouseup', stopDrag);\r\n document.addEventListener('touchend', stopDrag);\r\n document.addEventListener('mouseleave', stopDrag);\r\n\r\n function startDrag(e) {\r\n isDragging = true;\r\n const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;\r\n const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;\r\n \r\n startX = clientX - glassCard.offsetLeft;\r\n startY = clientY - glassCard.offsetTop;\r\n glassCard.style.transition = 'none';\r\n }\r\n\r\n function drag(e) {\r\n if (!isDragging) return;\r\n \r\n const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;\r\n const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;\r\n \r\n glassCard.style.left = (clientX - startX) + 'px';\r\n glassCard.style.top = (clientY - startY) + 'px';\r\n }\r\n\r\n function stopDrag() {\r\n isDragging = false;\r\n glassCard.style.transition = 'transform 0.3s ease';\r\n }\r\n\r\n \/\/ Update glass card styles\r\n function updateGlassCard() {\r\n const blurValue = blurRange.value + 'px';\r\n const opacityValue = opacityRange.value \/ 100;\r\n const colorValue = colorPicker.value;\r\n const borderColor = borderRange.value > 0 ? \r\n `border: ${borderRange.value}px solid rgba(255,255,255,0.2);` : '';\r\n const borderRadius = radiusRange.value + 'px';\r\n const boxShadow = shadowCheck.checked ? \r\n 'box-shadow: 0 30px 70px rgba(0,0,0,0.7);' : '';\r\n \r\n \/\/ Convert hex to RGB\r\n const rgbColor = hexToRgb(colorValue);\r\n const bgColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${opacityValue})`;\r\n \r\n \/\/ Apply styles\r\n glassCard.style.background = bgColor;\r\n glassCard.style.backdropFilter = `blur(${blurValue})`;\r\n glassCard.style.webkitBackdropFilter = `blur(${blurValue})`;\r\n glassCard.style.border = borderColor;\r\n glassCard.style.borderRadius = borderRadius;\r\n glassCard.style.boxShadow = boxShadow;\r\n \r\n \/\/ Toggle noise overlay\r\n if (noiseCheck.checked) {\r\n noiseOverlay.style.display = 'block';\r\n } else {\r\n noiseOverlay.style.display = 'none';\r\n }\r\n \r\n \/\/ Update CSS code\r\n updateCssCode(bgColor, blurValue, borderColor, borderRadius, boxShadow);\r\n }\r\n\r\n \/\/ Convert hex to RGB\r\n function hexToRgb(hex) {\r\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\r\n return result ? {\r\n r: parseInt(result[1], 16),\r\n g: parseInt(result[2], 16),\r\n b: parseInt(result[3], 16)\r\n } : null;\r\n }\r\n\r\n \/\/ Update CSS code display\r\n function updateCssCode(bgColor, blurValue, borderColor, borderRadius, boxShadow) {\r\n const cssTemplate = `.glass-card {\r\n background: ${bgColor};\r\n backdrop-filter: blur(${blurValue});\r\n -webkit-backdrop-filter: blur(${blurValue});\r\n ${borderColor}\r\n border-radius: ${borderRadius};\r\n ${boxShadow}\r\n overflow: hidden;\r\n}`;\r\n \r\n cssCode.textContent = cssTemplate;\r\n }\r\n\r\n \/\/ Copy CSS code\r\n copyBtn.addEventListener('click', () => {\r\n navigator.clipboard.writeText(cssCode.textContent)\r\n .then(() => {\r\n copyBtn.textContent = '\u06a9\u067e\u06cc \u0634\u062f!';\r\n setTimeout(() => {\r\n copyBtn.textContent = '\u06a9\u067e\u06cc \u06a9\u062f CSS';\r\n }, 2000);\r\n })\r\n .catch(err => console.error('Failed to copy:', err));\r\n });\r\n\r\n \/\/ Event listeners for controls\r\n blurRange.addEventListener('input', updateGlassCard);\r\n opacityRange.addEventListener('input', updateGlassCard);\r\n colorPicker.addEventListener('input', updateGlassCard);\r\n borderRange.addEventListener('input', updateGlassCard);\r\n radiusRange.addEventListener('input', updateGlassCard);\r\n shadowCheck.addEventListener('change', updateGlassCard);\r\n noiseCheck.addEventListener('change', updateGlassCard);\r\n\r\n \/\/ Initial update\r\n updateGlassCard();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ec73e1 elementor-widget elementor-widget-text-editor\" data-id=\"1ec73e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>\u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 (Glassmorphism) \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u0631\u0646\u062f\u0647\u0627\u06cc \u0628\u0631\u062a\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u060c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0648 \u062d\u062a\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644\u200c\u0647\u0627 \u0628\u0647 \u0634\u062f\u062a \u0645\u062d\u0628\u0648\u0628 \u0634\u062f\u0647. \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u0627\u0641\u06a9\u062a \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc \u0645\u0627\u062a \u0648 \u0634\u0641\u0627\u0641\u060c \u062d\u0633 \u0639\u0645\u0642\u060c \u0645\u062f\u0631\u0646\u06cc\u062a\u0647 \u0648 \u0644\u0648\u06a9\u0633 \u0628\u0648\u062f\u0646 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0628\u0635\u0631\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062f\u0644\u0646\u0634\u06cc\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/strong><\/p><p dir=\"auto\">\u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p><ul dir=\"auto\"><li><h4>\u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0645\u062d\u0648 (Backdrop Blur)<\/h4><\/li><li><h4>\u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0646\u062a\u0631\u0644\u200c\u0634\u062f\u0647 (Opacity \u06a9\u0645)<\/h4><\/li><li><h4>\u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645 \u0648 \u0646\u0627\u0632\u06a9<\/h4><\/li><li><h4>\u0633\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0645\u0644\u0627\u06cc\u0645 \u0648 \u0686\u0646\u062f\u0644\u0627\u06cc\u0647<\/h4><\/li><li><h4>\u0628\u0627\u0641\u062a \u0646\u0648\u06cc\u0632 \u0638\u0631\u06cc\u0641 \u0628\u0631\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\u200c\u062a\u0631 \u0634\u062f\u0646 \u0627\u0641\u06a9\u062a \u0634\u06cc\u0634\u0647<\/h4><\/li><\/ul><p dir=\"auto\">\u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0628\u0647\u200c\u062e\u0635\u0648\u0635 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a\u06cc\u060c \u0644\u0646\u062f\u06cc\u0646\u06af\u200c\u067e\u06cc\u062c\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u0627\u0644\u06cc\u060c \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u0644\u0648\u06a9\u0633 \u0648 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0686\u0634\u0645\u200c\u0646\u0648\u0627\u0632 \u0627\u0633\u062a \u0648 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647\u200c\u062e\u0648\u0628\u06cc \u0627\u0632 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0634\u0644\u0648\u063a \u062c\u062f\u0627 \u0634\u0648\u062f.<\/p><p dir=\"auto\">\u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5\u060c \u0634\u0631\u06a9\u062a\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u06cc \u0645\u062b\u0644 \u0633\u0627\u0645\u0633\u0648\u0646\u06af (One UI7 \u0648 One UI8)\u060c<\/p><p dir=\"auto\">\u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a (\u0648\u06cc\u0646\u062f\u0648\u0632 12) \u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0633\u062a\u0627\u0631\u062a\u200c\u0622\u067e\u200c\u0647\u0627\u06cc \u0645\u0637\u0631\u062d \u062f\u0646\u06cc\u0627 \u0627\u0632 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0633\u0628\u06a9 \u0627\u0635\u0644\u06cc UI \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p><p dir=\"auto\">\u0628\u0627 \u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0648 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645\u00a0Glassmorphism CSS Generator Online\u060c \u062f\u0631 \u0686\u0646\u062f \u062b\u0627\u0646\u06cc\u0647 \u0645\u06cc\u200c\u062a\u0648\u0646\u06cc \u06a9\u062f CSS \u06a9\u0627\u0645\u0644\u0627\u064b \u062a\u0645\u06cc\u0632 \u0648 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0648 \u0628\u0633\u0627\u0632\u06cc\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062f\u0644\u062e\u0648\u0627\u0647\u062a (\u0628\u0644\u0648\u0631\u060c \u0631\u0646\u06af\u060c \u0634\u0641\u0627\u0641\u06cc\u062a\u060c \u062d\u0627\u0634\u06cc\u0647\u060c \u0633\u0627\u06cc\u0647 \u0648 \u0646\u0648\u06cc\u0632) \u0631\u0648 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc \u0648 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062a\u0648\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc \u2014 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0641\u062a\u0648\u0634\u0627\u067e \u06cc\u0627 \u062f\u0627\u0646\u0634 \u067e\u06cc\u0686\u06cc\u062f\u0647 CSS!<\/p><h4 dir=\"auto\"><a href=\"https:\/\/iliyasaharkhiz.webiri.ir\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%87%d8%af%d8%b1-%d8%b4%db%8c%d8%b4%d9%87-%d8%a7%db%8c-%d8%a7%d9%84%d9%85%d9%86%d8%aa%d9%88%d8%b1-2025\/\">\u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0622\u0645\u0648\u0632\u0634 \u0686\u06af\u0648\u0646\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0632\u06cc\u0628\u0627 \u062f\u0631 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f\u062a\u0627\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/a><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f1f288f e-flex e-con-boxed e-con e-parent\" data-id=\"f1f288f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdc419a elementor-widget elementor-widget-text-editor\" data-id=\"fdc419a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1 dir=\"auto\">\u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 (Glassmorphism) \u0686\u06cc\u0633\u062a\u061f \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 + \u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0631\u0627\u06cc\u06af\u0627\u0646 \u06f2\u06f0\u06f2\u06f5<\/h1><p dir=\"auto\">\u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u06cc\u06a9\u06cc \u0627\u0632 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u062a\u0631\u06cc\u0646 \u0648 \u0632\u06cc\u0628\u0627\u062a\u0631\u06cc\u0646 \u062a\u0631\u0646\u062f\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062f\u0631 \u062a\u0645\u0627\u0645 \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644\u200c\u0647\u0627\u060c \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u062f\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0628\u0627 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0638\u0627\u0647\u0631 \u0634\u06cc\u0634\u0647 \u0645\u0627\u062a \u0648 \u0646\u06cc\u0645\u0647\u200c\u0634\u0641\u0627\u0641\u060c \u062d\u0633 \u0639\u0645\u0642\u060c \u0644\u0648\u06a9\u0633 \u0628\u0648\u062f\u0646 \u0648 \u0633\u0628\u06a9\u06cc \u0628\u06cc\u200c\u0646\u0638\u06cc \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647 \u0648\u0636\u0648\u062d \u0627\u0632 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0634\u0644\u0648\u063a \u062c\u062f\u0627 \u0634\u0648\u062f.<\/p><p dir=\"auto\">\u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u06cc\u06a9 \u00ab\u062a\u0631\u0646\u062f\u00bb \u0646\u06cc\u0633\u062a\u061b \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u06cc\u06a9 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0648\u0627\u0642\u0639\u06cc \u0634\u062f\u0647. \u0627\u0632 \u0648\u06cc\u0646\u062f\u0648\u0632 \u06f1\u06f2 \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a \u0648 macOS Sequoia \u0627\u067e\u0644 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 One UI 8 \u0633\u0627\u0645\u0633\u0648\u0646\u06af\u060c HarmonyOS \u0647\u0648\u0622\u0648\u06cc\u060c ColorOS \u0627\u0648\u067e\u0648 \u0648 \u062d\u062a\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u0639\u0631\u0648\u0641 \u0645\u062b\u0644 Figma\u060c Notion\u060c Spotify\u060c Telegram X \u0648 \u0635\u062f\u0647\u0627 \u067e\u0631\u0648\u0698\u0647 \u062f\u06cc\u06af\u0631\u060c \u0647\u0645\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p><h3 dir=\"auto\">\u0639\u0646\u0627\u0635\u0631 \u0627\u0635\u0644\u06cc \u06cc\u06a9 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u06a9\u062f\u0627\u0645\u0646\u062f\u061f<\/h3><ol dir=\"auto\"><li>\u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0646\u062a\u0631\u0644\u200c\u0634\u062f\u0647 (\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u06cc\u0646 \u06f1\u06f5 \u062a\u0627 \u06f4\u06f0 \u062f\u0631\u0635\u062f)<\/li><li>\u0628\u0644\u0648\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 (Backdrop Blur) \u2013 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0628\u062e\u0634 \u06a9\u0647 \u062d\u0633 \u0634\u06cc\u0634\u0647 \u0648\u0627\u0642\u0639\u06cc \u0645\u06cc\u200c\u062f\u0647\u062f<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-203\" src=\"http:\/\/iliyasaharkhiz.webiri.ir\/wp-content\/uploads\/sites\/723\/2025\/11\/A-modern-UI-design--200x300.png\" alt=\"Glassmorphism CSS Generator Online\" width=\"200\" height=\"300\" \/><\/p><\/li><li>\u062d\u0627\u0634\u06cc\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0638\u0631\u06cc\u0641 \u0633\u0641\u06cc\u062f \u06cc\u0627 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc \u0628\u0627 \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0645<\/li><li>\u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f (\u06f1\u06f6 \u062a\u0627 \u06f4\u06f8 \u067e\u06cc\u06a9\u0633\u0644 \u06cc\u0627 \u0628\u06cc\u0634\u062a\u0631)<\/li><li>\u0633\u0627\u06cc\u0647\u200c\u0647\u0627\u06cc \u0686\u0646\u062f\u0644\u0627\u06cc\u0647 \u0648 \u0628\u0644\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062d\u0633 \u0634\u0646\u0627\u0648\u0631 \u0628\u0648\u062f\u0646<\/li><li>\u0628\u0627\u0641\u062a \u0646\u0648\u06cc\u0632 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0644\u0627\u06cc\u0645 (Noise Texture) \u062a\u0627 \u0634\u06cc\u0634\u0647 \u0634\u0628\u06cc\u0647 \u067e\u0644\u0627\u0633\u062a\u06cc\u06a9 \u0646\u0634\u0648\u062f<\/li><\/ol><h3 dir=\"auto\">\u0686\u0631\u0627 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 \u0627\u06cc\u0646\u0642\u062f\u0631 \u0645\u062d\u0628\u0648\u0628 \u0634\u062f\u061f<\/h3><ul dir=\"auto\"><li>\u06a9\u0627\u0645\u0644\u0627\u064b \u0628\u0627 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 (Dark Mode) \u0647\u0645\u0627\u0647\u0646\u06af \u0627\u0633\u062a<\/li><li>\u0631\u0648\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u06f1\u06f2\u06f0 \u0647\u0631\u062a\u0632 \u0648 \u0628\u0627\u0644\u0627\u062a\u0631 \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0631\u0648\u0627\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f<\/li><li>\u062d\u0633 \u0644\u0648\u06a9\u0633 \u0648 \u067e\u0631\u06cc\u0645\u06cc\u0648\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f (\u0645\u062e\u0635\u0648\u0635\u0627\u064b \u0628\u0631\u0627\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u0648 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0644\u0648\u06a9\u0633)<\/li><li>\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644 \u0648 \u062a\u0645\u06cc\u0632 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f<\/li><li>\u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0648 \u062f\u0633\u06a9\u062a\u0627\u067e \u0628\u0647 \u06cc\u06a9 \u0627\u0646\u062f\u0627\u0632\u0647 \u0632\u06cc\u0628\u0627 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f<\/li><\/ul><h3 dir=\"auto\">\u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0648 \u0631\u0627\u06cc\u06af\u0627\u0646 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u06f2\u06f0\u06f2\u06f5 (Glassmorphism CSS Generator Online)<\/h3><p dir=\"auto\">\u0645\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0648\u0646 \u0627\u0628\u0632\u0627\u0631\u06cc \u0631\u0627 \u0633\u0627\u062e\u062a\u06cc\u0645 \u06a9\u0647 \u062e\u0648\u062f\u0645\u0627\u0646 \u0647\u0631 \u0631\u0648\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f:<\/p><ul dir=\"auto\"><li>\u0628\u0644\u0648\u0631\u060c \u0634\u0641\u0627\u0641\u06cc\u062a\u060c \u0631\u0646\u06af\u060c \u062d\u0627\u0634\u06cc\u0647\u060c \u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u060c \u0633\u0627\u06cc\u0647 \u0648 \u0646\u0648\u06cc\u0632 \u0631\u0627 \u0632\u0646\u062f\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/li><li>\u06a9\u0627\u0631\u062a \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u0627 \u0645\u0648\u0633 \u06cc\u0627 \u0627\u0646\u06af\u0634\u062a \u0628\u06a9\u0634\u06cc\u062f \u0648 \u0647\u0631 \u062c\u0627 \u062e\u0648\u0627\u0633\u062a\u06cc\u062f \u0628\u06af\u0630\u0627\u0631\u06cc\u062f<\/li><li>\u06a9\u062f CSS \u06a9\u0627\u0645\u0644\u0627\u064b \u062a\u0645\u06cc\u0632\u060c \u0628\u0647\u06cc\u0646\u0647 \u0648 \u0622\u0645\u0627\u062f\u0647 \u06a9\u067e\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/li><li>\u0628\u062f\u0648\u0646 \u0646\u0635\u0628\u060c \u0628\u062f\u0648\u0646 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0648 \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u0627\u06cc\u06af\u0627\u0646<\/li><\/ul><p dir=\"auto\">\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u0627\u06cc\u062a \u06cc\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u062a\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0637\u062d \u06f2\u06f0\u06f2\u06f5 \u0628\u0631\u0633\u0627\u0646\u06cc\u062f!<\/p><h3 dir=\"auto\">\u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u06a9\u062f CSS \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc (\u062e\u0637 \u0628\u0647 \u062e\u0637)<\/h3><p dir=\"auto\">\u0627\u06cc\u0646 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u06a9\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0628\u0632\u0627\u0631 \u0628\u0627\u0644\u0627 (Glassmorphism CSS Generator Online) \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43a200c elementor-widget elementor-widget-code-highlight\" data-id=\"43a200c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>Glassmorphism CSS Generator Online\n\n.glass-card {\n \/* \u06f1. \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0645\u0647\u200c\u0634\u0641\u0627\u0641 *\/\n background: rgba(255, 255, 255, 0.25); \/* \u0631\u0648\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u06cc\u0631\u0647 \u0639\u0627\u0644\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f *\/\n\n \/* \u06f2. \u0628\u0644\u0648\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u2013 \u0642\u0644\u0628 \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 *\/\n backdrop-filter: blur(20px); \/* \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 *\/\n -webkit-backdrop-filter: blur(20px); \/* \u0633\u0627\u0641\u0627\u0631\u06cc \u0648 iOS *\/\n\n \/* \u06f3. \u062d\u0627\u0634\u06cc\u0647 \u0638\u0631\u06cc\u0641 \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc *\/\n border: 1px solid rgba(255, 255, 255, 0.18);\n\n \/* \u06f4. \u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647\u200c\u0647\u0627 *\/\n border-radius: 32px;\n\n \/* \u06f5. \u0633\u0627\u06cc\u0647 \u0686\u0646\u062f\u0644\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0639\u0645\u0642 \u0648\u0627\u0642\u0639\u06cc *\/\n box-shadow: \n 0 8px 32px rgba(0, 0, 0, 0.37),\n 0 30px 70px rgba(0, 0, 0, 0.7);\n\n \/* \u06f6. \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u06cc\u0631\u0648\u0646\u200c\u0632\u062f\u06af\u06cc \u0645\u062d\u062a\u0648\u0627 *\/\n overflow: hidden;\n\n \/* \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc: \u0646\u0648\u06cc\u0632 \u0648\u0627\u0642\u0639\u06cc \u0634\u06cc\u0634\u0647 *\/\n position: relative;\n}\n\n\/* \u0646\u0648\u06cc\u0632 \u0638\u0631\u06cc\u0641 (\u0628\u0627 SVG \u0627\u06cc\u0646\u0644\u0627\u06cc\u0646 \u2013 \u0628\u062f\u0648\u0646 \u0641\u0627\u06cc\u0644 \u062e\u0627\u0631\u062c\u06cc) *\/\n.glass-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'\/%3E%3C\/svg%3E\");\n mix-blend-mode: overlay;\n pointer-events: none;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9a57fab e-flex e-con-boxed e-con e-parent\" data-id=\"9a57fab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4909cc elementor-widget elementor-widget-text-editor\" data-id=\"f4909cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 dir=\"auto\">\u0686\u0647 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u061f<\/h3><p>\u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u062e\u0648\u0628 \u0648 \u0645\u0639\u0631\u0648\u0641 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06af\u0644\u0633 \u0645\u0648\u0631\u0641\u06cc\u0633\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 (Glassmorphism CSS Generator Online) <a href=\"https:\/\/css.glass\/\">css.glass<\/a> \u0627\u0633\u062a. \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0644\u0648\u0631 \u0648 \u062a\u0631\u0646\u0633\u067e\u0631\u0646\u0633 \u062f\u0627\u0631\u062f \u0648\u0644\u06cc \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u06a9\u0647 \u0627\u0628\u0632\u0627\u0631 \u0645\u0627 (Glassmorphism CSS Generator Online) \u062f\u0627\u0631\u062f \u0645\u0627\u0646\u0646\u062f \u062d\u0627\u0634\u06cc\u0647 \u06cc\u0627 \u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647 \u0648 \u06cc\u0627 \u0646\u0648\u06cc\u0632 \u0648 \u0633\u0627\u06cc\u0647 \u0648 \u0633\u0627\u0641\u0627\u0631\u06cc \u0631\u0627 \u0646\u062f\u0627\u0631\u062f \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0645\u0627 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u062f\u0645\u0627\u0646 (Glassmorphism CSS Generator Online) \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u062f\u0647\u06cc\u0645 \u0686\u0648\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0622\u0646 \u0627\u0632 \u0647\u0631 \u0633\u0627\u06cc\u062a \u062f\u06cc\u06af\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u0646\u06cc\u0633\u062a.\u00a0<\/p><h3 dir=\"auto\">\u0646\u06a9\u0627\u062a \u0637\u0644\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0646\u062a\u06cc\u062c\u0647 \u062f\u0631 \u06f2\u06f0\u06f2\u06f5<\/h3><ul dir=\"auto\"><li>\u0628\u0644\u0648\u0631 \u06a9\u0645\u062a\u0631 \u0627\u0632 \u06f1\u06f2px \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f \u2192 \u06f1\u06f6 \u062a\u0627 \u06f3\u06f0px \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0627\u0633\u062a<\/li><li>\u0647\u0645\u06cc\u0634\u0647 \u0627\u0632 \u062f\u0648 \u0644\u0627\u06cc\u0647 \u0633\u0627\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/li><li>\u0646\u0648\u06cc\u0632 \u0631\u0627 \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f\u061b \u0628\u062f\u0648\u0646 \u0646\u0648\u06cc\u0632 \u0634\u06cc\u0634\u0647 \u0634\u0628\u06cc\u0647 \u067e\u0644\u0627\u0633\u062a\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f<\/li><li>\u0628\u0631\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u062d\u062a\u0645\u0627\u064b -webkit-backdrop-filter \u0631\u0627 \u0647\u0645 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f<\/li><li>\u0631\u0648\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062e\u06cc\u0644\u06cc \u0631\u0648\u0634\u0646\u060c \u0627\u0632 \u0631\u0646\u06af \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc \u062a\u06cc\u0631\u0647 \u0628\u0627 \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/li><\/ul><p dir=\"auto\">\u062d\u0627\u0644\u0627 \u0641\u0642\u0637 \u06a9\u0627\u0641\u06cc\u0647 \u0627\u0628\u0632\u0627\u0631 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062f\u0644\u062e\u0648\u0627\u0647\u200c\u062a\u0627\u0646 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u062f \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u06a9\u0645\u062a\u0631 \u0627\u0632 \u06f1\u06f0 \u062b\u0627\u0646\u06cc\u0647 \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u062a\u0631\u0646\u062f\u0647\u0627\u06cc \u06f2\u06f0\u06f2\u06f5 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a.<\/p><p dir=\"auto\">\u0645\u0648\u0641\u0642 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc\u062a\u0627\u0646 \u0647\u0645\u06cc\u0634\u0647 \u0632\u06cc\u0628\u0627 \u0648 \u0628\u0647\u200c\u0631\u0648\u0632 \u0628\u0627\u0634\u062f!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Glassmorphism CSS Generator Online Glassmorphism Generator Glassmorphism Generator \u0628\u0644\u0648\u0631 (px) \u0634\u0641\u0627\u0641\u06cc\u062a \u0631\u0646\u06af \u062d\u0627\u0634\u06cc\u0647 \u06af\u0631\u062f\u06cc \u06af\u0648\u0634\u0647 \u0633\u0627\u06cc\u0647 \u0646\u0648\u06cc\u0632 \u0633\u0627\u0641\u0627\u0631\u06cc \u06a9\u067e\u06cc \u06a9\u062f CSS Glass Card \u0627\u06cc\u0646 \u06a9\u0627\u0631\u062a \u0631\u0648 \u0628\u0627 \u0645\u0648\u0633 \u06cc\u0627 \u0627\u0646\u06af\u0634\u062a \u0628\u06a9\u0634! \u06af\u0644\u0633\u0645\u0648\u0631\u0641\u06cc\u0633\u0645 (Glassmorphism) \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u0631\u0646\u062f\u0647\u0627\u06cc \u0628\u0631\u062a\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u060c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0648 \u062d\u062a\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644\u200c\u0647\u0627 \u0628\u0647 \u0634\u062f\u062a \u0645\u062d\u0628\u0648\u0628 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=\/wp\/v2\/pages\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=171"}],"version-history":[{"count":0,"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=\/wp\/v2\/pages\/171\/revisions"}],"wp:attachment":[{"href":"https:\/\/iliyasaharkhiz.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}