{"id":50721,"date":"2026-05-31T20:40:42","date_gmt":"2026-05-31T20:40:42","guid":{"rendered":"https:\/\/bsolution.me\/he\/?page_id=50721"},"modified":"2026-05-31T20:42:05","modified_gmt":"2026-05-31T20:42:05","slug":"css-shadow-gradient-generator","status":"publish","type":"page","link":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/","title":{"rendered":"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS"},"content":{"rendered":"\n\n<style>\n\/* Perfected Futuristic Design System by Bsolution *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;500;700;800&display=swap');\n\n:root {\n    --f-bg: #F5F5F7;\n    --f-card: rgba(255, 255, 255, 0.85);\n    --f-text: #1d1d1f;\n    --f-muted: #86868b;\n    --f-accent: #0066cc;\n    --f-border: rgba(0, 0, 0, 0.08);\n    --f-shadow: 0 8px 30px rgba(0,0,0,0.04);\n}\n\n.dark-theme {\n    --f-bg: #000000;\n    --f-card: rgba(28, 28, 30, 0.85);\n    --f-text: #f5f5f7;\n    --f-muted: #86868b;\n    --f-accent: #2997ff;\n    --f-border: rgba(255, 255, 255, 0.12);\n    --f-shadow: 0 8px 40px rgba(0,0,0,0.6);\n}\n\n.futur-layout {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 60px 20px;\n    font-family: 'Heebo', -apple-system, system-ui, sans-serif;\n    direction: rtl;\n    color: var(--f-text);\n    background-color: transparent;\n    transition: color 0.3s ease;\n}\n\n\/* Global Background override when tool is active *\/\nbody.tool-active {\n    background-color: var(--f-bg) !important;\n}\n\n.futur-glass-card {\n    background: var(--f-card);\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    border: 1px solid var(--f-border);\n    border-radius: 22px;\n    padding: 40px;\n    box-shadow: var(--f-shadow);\n    margin-bottom: 40px;\n}\n\n.futur-layout h1.wp-block-heading {\n    font-size: clamp(2.5rem, 5vw, 3.5rem);\n    font-weight: 800;\n    color: var(--f-text);\n    margin-bottom: 12px;\n    letter-spacing: -0.02em;\n    text-align: center;\n}\n\n.futur-layout .tool-card {\n    width: 80%;\n    margin: 0 auto 40px auto;\n}\n@media (max-width: 900px) {\n    .futur-layout .tool-card { width: 100%; }\n}\n\n.futur-layout header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 12px;\n    margin-bottom: 34px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.futur-layout header h1, \n.futur-layout header h2.main-title,\n.futur-layout header .title-wrap .main-title {\n    margin: 0;\n    font-size: clamp(2rem, 4vw, 2.7rem);\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--f-text);\n}\n.futur-layout header h2.main-title span.icon { font-size: 1.25em; }\n.futur-layout header .subtitle,\n.futur-layout header p.subtitle {\n    margin: 0;\n    font-size: 1.05rem;\n    color: var(--f-muted);\n    line-height: 1.6;\n}\n.futur-layout header .badge-local,\n.futur-layout header .free-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.78rem;\n    padding: 6px 14px;\n    border-radius: 999px;\n    border: 1px solid var(--f-border);\n    background: var(--f-card);\n    color: var(--f-text);\n    box-shadow: 0 4px 10px rgba(0,0,0,0.02);\n}\n.futur-layout header .badge-dot,\n.futur-layout header .free-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 999px;\n    background: #22c55e;\n    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);\n}\n\n.futur-layout .page-hook {\n    font-size: 1.25rem;\n    color: var(--f-muted);\n    text-align: center;\n    margin-bottom: 50px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.futur-layout h2.wp-block-heading {\n    font-size: 1.7rem;\n    font-weight: 700;\n    margin: 40px 0 20px;\n}\n\n.futur-layout p {\n    font-size: 1.15rem;\n    color: var(--f-text);\n    opacity: 0.9;\n    margin-bottom: 24px;\n    line-height: 1.7;\n}\n\n\/* Theme Toggle Button *\/\n.theme-toggle-wrap {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: 20px;\n}\n.theme-btn {\n    background: var(--f-card);\n    border: 1px solid var(--f-border);\n    color: var(--f-text);\n    padding: 8px 16px;\n    border-radius: 999px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    box-shadow: var(--f-shadow);\n}\n\n\/* Input & Button Styles for Tools *\/\n.futur-input {\n    width: 100%;\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid var(--f-border);\n    background: rgba(0,0,0,0.03);\n    color: var(--f-text);\n    font-size: 1rem;\n    margin-bottom: 16px;\n    transition: all 0.2s ease;\n}\n.dark-theme .futur-input { background: rgba(255,255,255,0.05); }\n\n.futur-btn {\n    background: var(--f-accent);\n    color: #fff;\n    border: none;\n    padding: 14px 28px;\n    border-radius: 12px;\n    font-weight: 700;\n    font-size: 1.1rem;\n    cursor: pointer;\n    transition: transform 0.2s ease;\n}\n.futur-btn:hover { transform: scale(1.02); }\n\n@media (max-width: 600px) {\n    .futur-layout { padding: 40px 16px; }\n    .futur-glass-card { padding: 24px; }\n}\n<\/style>\n<script>\n(function() {\n    var applyTheme = function(theme) {\n        if (theme === 'dark') {\n            document.documentElement.classList.add('dark-theme');\n        } else {\n            document.documentElement.classList.remove('dark-theme');\n        }\n        localStorage.setItem('bsolution-theme', theme);\n    };\n    \n    \/\/ Apply saved theme immediately\n    document.body.classList.add('tool-active');\n    var saved = localStorage.getItem('bsolution-theme') || 'light';\n    applyTheme(saved);\n    \n    \/\/ Bind theme toggle button (with retry since it may not exist yet)\n    function bindToggle() {\n        var btn = document.getElementById('globalThemeToggle');\n        if (!btn) { setTimeout(bindToggle, 100); return; }\n        if (btn.dataset.bound) return;\n        btn.dataset.bound = '1';\n        btn.addEventListener('click', function() {\n            var isDark = document.documentElement.classList.contains('dark-theme');\n            applyTheme(isDark ? 'light' : 'dark');\n        });\n    }\n    bindToggle();\n})();\n<\/script>\n\n<div class=\"futur-layout\">\n<div class=\"theme-toggle-wrap\"><button class=\"theme-btn\" id=\"globalThemeToggle\">\ud83c\udf19 \u05de\u05e6\u05d1 \u05dc\u05d9\u05dc\u05d4<\/button><\/div>\n\n\n\n<header>\n<h2 class=\"main-title\">\u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS <span class=\"icon pill\">\ud83c\udfa8<\/span><\/h2>\n<p class=\"subtitle\">\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea &#8211; \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.<\/p>\n<div class=\"free-badge\"><span class=\"free-dot\"><\/span> \u05d7\u05d9\u05e0\u05dd \u05d5\u05dc\u05dc\u05d0 \u05d4\u05e8\u05e9\u05de\u05d4<\/div>\n<\/header>\n\n\n\n<div class=\"futur-glass-card tool-card\">\n<div id=\"bnet-tool-css-generator\">\n<style>\n    \/* CSS Variables: Light Mode *\/\n    #bnet-tool-css-generator {\n      --bg-color: transparent;\n      --panel-bg: #ffffff;\n      --text-color: #333333;\n      --border-color: #e2e8f0;\n      --accent-color: #0066cc;\n      --accent-hover: #0052a3;\n      --input-bg: #f8fafc;\n      --code-bg: #1e293b;\n      --code-text: #e2e8f0;\n      --tab-bg: #f1f5f9;\n      --tab-active-bg: #ffffff;\n      --preview-bg: #f1f5f9;\n      --border-radius: 12px;\n      font-family: 'Heebo', sans-serif;\n      direction: rtl;\n      color: var(--text-color);\n      box-sizing: border-box;\n      max-width: 100%;\n    }\n    \n    \/* CSS Variables: Dark Mode *\/\n    .dark-theme #bnet-tool-css-generator {\n      --panel-bg: #1e293b;\n      --text-color: #f8fafc;\n      --border-color: #334155;\n      --accent-color: #3b82f6;\n      --accent-hover: #60a5fa;\n      --input-bg: #0f172a;\n      --code-bg: #0f172a;\n      --code-text: #f8fafc;\n      --tab-bg: #0f172a;\n      --tab-active-bg: #1e293b;\n      --preview-bg: #0f172a;\n    }\n\n    #bnet-tool-css-generator * {\n      box-sizing: inherit;\n    }\n\n    #bnet-tool-css-generator .calculator-container {\n      background: var(--bg-color);\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n    }\n\n    \/* Preview Section *\/\n    #bnet-tool-css-generator .preview-section {\n      background: var(--preview-bg);\n      border: 1px solid var(--border-color);\n      border-radius: var(--border-radius);\n      height: 300px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      overflow: hidden;\n    }\n\n    #bnet-tool-css-generator .preview-box {\n      width: 200px;\n      height: 200px;\n      background: #ffffff;\n      border-radius: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: #333;\n      transition: all 0.3s ease;\n    }\n\n    \/* Controls Section *\/\n    #bnet-tool-css-generator .controls-section {\n      background: var(--panel-bg);\n      border: 1px solid var(--border-color);\n      border-radius: var(--border-radius);\n      overflow: hidden;\n    }\n\n    \/* Tabs *\/\n    #bnet-tool-css-generator .tabs {\n      display: flex;\n      background: var(--tab-bg);\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    #bnet-tool-css-generator .tab-btn {\n      flex: 1;\n      padding: 1rem;\n      border: none;\n      background: transparent;\n      color: var(--text-color);\n      font-family: inherit;\n      font-size: 1rem;\n      font-weight: 600;\n      cursor: pointer;\n      transition: background 0.2s, color 0.2s;\n    }\n\n    #bnet-tool-css-generator .tab-btn.active {\n      background: var(--tab-active-bg);\n      color: var(--accent-color);\n      border-bottom: 2px solid var(--accent-color);\n    }\n\n    #bnet-tool-css-generator .tab-content {\n      display: none;\n      padding: 1.5rem;\n    }\n\n    #bnet-tool-css-generator .tab-content.active {\n      display: block;\n    }\n\n    \/* Inputs *\/\n    #bnet-tool-css-generator .control-group {\n      margin-bottom: 1.25rem;\n    }\n\n    #bnet-tool-css-generator .control-group:last-child {\n      margin-bottom: 0;\n    }\n\n    #bnet-tool-css-generator .control-header {\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: 0.5rem;\n      font-size: 0.95rem;\n      font-weight: 500;\n    }\n\n    #bnet-tool-css-generator input[type=\"range\"] {\n      width: 100%;\n      accent-color: var(--accent-color);\n      cursor: pointer;\n    }\n\n    #bnet-tool-css-generator .color-picker-group {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n    }\n\n    #bnet-tool-css-generator input[type=\"color\"] {\n      width: 50px;\n      height: 40px;\n      padding: 0;\n      border: 1px solid var(--border-color);\n      border-radius: 8px;\n      cursor: pointer;\n      background: transparent;\n    }\n\n    #bnet-tool-css-generator .checkbox-group {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      cursor: pointer;\n      font-weight: 500;\n    }\n\n    #bnet-tool-css-generator .checkbox-group input {\n      width: 18px;\n      height: 18px;\n      accent-color: var(--accent-color);\n      cursor: pointer;\n    }\n\n    #bnet-tool-css-generator select {\n      width: 100%;\n      padding: 0.75rem;\n      border: 1px solid var(--border-color);\n      border-radius: 8px;\n      background: var(--input-bg);\n      color: var(--text-color);\n      font-family: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n\n    \/* Output Section *\/\n    #bnet-tool-css-generator .output-section {\n      background: var(--code-bg);\n      border-radius: var(--border-radius);\n      padding: 1.5rem;\n      position: relative;\n    }\n\n    #bnet-tool-css-generator pre {\n      margin: 0;\n      padding: 0;\n      overflow-x: auto;\n      direction: ltr;\n      text-align: left;\n    }\n\n    #bnet-tool-css-generator code {\n      font-family: 'Courier New', Courier, monospace;\n      color: var(--code-text);\n      font-size: 0.95rem;\n      line-height: 1.5;\n    }\n\n    #bnet-tool-css-generator .copy-btn {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      background: var(--accent-color);\n      color: white;\n      border: none;\n      padding: 0.5rem 1rem;\n      border-radius: 6px;\n      font-family: inherit;\n      font-weight: 600;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    #bnet-tool-css-generator .copy-btn:hover {\n      background: var(--accent-hover);\n    }\n    \n    #bnet-tool-css-generator .copy-btn.copied {\n      background: #10b981;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 600px) {\n      #bnet-tool-css-generator .tabs {\n        flex-direction: column;\n      }\n      #bnet-tool-css-generator .tab-btn {\n        border-bottom: 1px solid var(--border-color);\n      }\n      #bnet-tool-css-generator .tab-btn.active {\n        border-bottom: 1px solid var(--border-color);\n        border-right: 4px solid var(--accent-color);\n      }\n      #bnet-tool-css-generator .copy-btn {\n        position: static;\n        margin-top: 1rem;\n        width: 100%;\n      }\n    }\n  <\/style>\n<div class=\"calculator-container\">\n<div class=\"preview-section\">\n<div class=\"preview-box\" id=\"preview-box\">\n        \u05ea\u05e6\u05d5\u05d2\u05d4 \u05de\u05e7\u05d3\u05d9\u05de\u05d4\n      <\/div>\n<\/div>\n<div class=\"controls-section\">\n<div class=\"tabs\">\n<button class=\"tab-btn active\" data-target=\"shadow-tab\">\u05d4\u05e6\u05dc\u05dc\u05d4 (Shadow)<\/button>\n<button class=\"tab-btn\" data-target=\"gradient-tab\">\u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2 (Gradient)<\/button>\n<button class=\"tab-btn\" data-target=\"animation-tab\">\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4<\/button>\n<\/div>\n<div class=\"tab-content active\" id=\"shadow-tab\">\n<div class=\"control-group\">\n<div class=\"control-header\">\n<span>\u05ea\u05d6\u05d5\u05d6\u05d4 \u05d0\u05d5\u05e4\u05e7\u05d9\u05ea (X-Offset)<\/span>\n<span id=\"shadow-x-val\">0px<\/span>\n<\/div>\n<input id=\"shadow-x\" max=\"50\" min=\"-50\" type=\"range\" value=\"0\"\/>\n<\/div>\n<div class=\"control-group\">\n<div class=\"control-header\">\n<span>\u05ea\u05d6\u05d5\u05d6\u05d4 \u05d0\u05e0\u05db\u05d9\u05ea (Y-Offset)<\/span>\n<span id=\"shadow-y-val\">10px<\/span>\n<\/div>\n<input id=\"shadow-y\" max=\"50\" min=\"-50\" type=\"range\" value=\"10\"\/>\n<\/div>\n<div class=\"control-group\">\n<div class=\"control-header\">\n<span>\u05d8\u05e9\u05d8\u05d5\u05e9 (Blur)<\/span>\n<span id=\"shadow-blur-val\">20px<\/span>\n<\/div>\n<input id=\"shadow-blur\" max=\"100\" min=\"0\" type=\"range\" value=\"20\"\/>\n<\/div>\n<div class=\"control-group\">\n<div class=\"control-header\">\n<span>\u05e4\u05e8\u05d9\u05e1\u05d4 (Spread)<\/span>\n<span id=\"shadow-spread-val\">0px<\/span>\n<\/div>\n<input id=\"shadow-spread\" max=\"50\" min=\"-50\" type=\"range\" value=\"0\"\/>\n<\/div>\n<div class=\"control-group color-picker-group\">\n<div>\n<div class=\"control-header\"><span>\u05e6\u05d1\u05e2 \u05d4\u05e6\u05dc\u05dc\u05d9\u05ea<\/span><\/div>\n<input id=\"shadow-color\" type=\"color\" value=\"#000000\"\/>\n<\/div>\n<div style=\"flex:1;\">\n<div class=\"control-header\">\n<span>\u05e9\u05e7\u05d9\u05e4\u05d5\u05ea (Opacity)<\/span>\n<span id=\"shadow-opacity-val\">0.15<\/span>\n<\/div>\n<input id=\"shadow-opacity\" max=\"1\" min=\"0\" step=\"0.01\" type=\"range\" value=\"0.15\"\/>\n<\/div>\n<\/div>\n<div class=\"control-group\" style=\"margin-top: 1rem;\">\n<label class=\"checkbox-group\">\n<input id=\"shadow-inset\" type=\"checkbox\"\/>\n            \u05d4\u05e6\u05dc\u05dc\u05d4 \u05e4\u05e0\u05d9\u05de\u05d9\u05ea (Inset)\n          <\/label>\n<\/div>\n<\/div>\n<div class=\"tab-content\" id=\"gradient-tab\">\n<div class=\"control-group\">\n<div class=\"control-header\"><span>\u05e1\u05d5\u05d2 \u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2<\/span><\/div>\n<select id=\"gradient-type\">\n<option value=\"linear\">\u05e7\u05d5\u05d5\u05d9\u05d5\u05d9 (Linear)<\/option>\n<option value=\"radial\">\u05e8\u05d3\u05d9\u05d0\u05dc\u05d9 (Radial)<\/option>\n<\/select>\n<\/div>\n<div class=\"control-group\" id=\"gradient-angle-group\">\n<div class=\"control-header\">\n<span>\u05d6\u05d5\u05d5\u05d9\u05ea (Angle)<\/span>\n<span id=\"gradient-angle-val\">135deg<\/span>\n<\/div>\n<input id=\"gradient-angle\" max=\"360\" min=\"0\" type=\"range\" value=\"135\"\/>\n<\/div>\n<div class=\"control-group color-picker-group\">\n<div style=\"flex:1;\">\n<div class=\"control-header\"><span>\u05e6\u05d1\u05e2 \u05d4\u05ea\u05d7\u05dc\u05d4<\/span><\/div>\n<input id=\"gradient-color-1\" style=\"width:100%;\" type=\"color\" value=\"#6366f1\"\/>\n<\/div>\n<div style=\"flex:1;\">\n<div class=\"control-header\"><span>\u05e6\u05d1\u05e2 \u05e1\u05d9\u05d5\u05dd<\/span><\/div>\n<input id=\"gradient-color-2\" style=\"width:100%;\" type=\"color\" value=\"#ec4899\"\/>\n<\/div>\n<\/div>\n<div class=\"control-group\" style=\"margin-top: 1rem;\">\n<label class=\"checkbox-group\">\n<input checked=\"\" id=\"gradient-enable\" type=\"checkbox\"\/>\n            \u05d4\u05e4\u05e2\u05dc \u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2 (\u05db\u05d1\u05d4 \u05db\u05d3\u05d9 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1\u05e6\u05d1\u05e2 \u05d7\u05dc\u05e7 \u05d1\u05dc\u05d1\u05d3)\n          <\/label>\n<\/div>\n<\/div>\n<div class=\"tab-content\" id=\"animation-tab\">\n<div class=\"control-group\">\n<div class=\"control-header\"><span>\u05e1\u05d5\u05d2 \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4<\/span><\/div>\n<select id=\"animation-type\">\n<option value=\"none\">\u05dc\u05dc\u05d0 \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4<\/option>\n<option value=\"pulse\">\u05e4\u05e2\u05d9\u05de\u05d4 (Pulse)<\/option>\n<option value=\"float\">\u05e8\u05d9\u05d7\u05d5\u05e3 (Float)<\/option>\n<option value=\"gradient-shift\">\u05ea\u05e0\u05d5\u05d3\u05ea \u05e6\u05d1\u05e2 (Gradient Shift) &#8211; \u05d3\u05d5\u05e8\u05e9 \u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2<\/option>\n<\/select>\n<\/div>\n<div class=\"control-group\" id=\"animation-duration-group\" style=\"display: none;\">\n<div class=\"control-header\">\n<span>\u05de\u05e9\u05da \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 (Duration)<\/span>\n<span id=\"animation-duration-val\">2s<\/span>\n<\/div>\n<input id=\"animation-duration\" max=\"10\" min=\"0.5\" step=\"0.5\" type=\"range\" value=\"2\"\/>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"output-section\">\n<button class=\"copy-btn\" id=\"copy-btn\">\u05d4\u05e2\u05ea\u05e7 CSS<\/button>\n<pre><code id=\"css-output\"><\/code><\/pre>\n<\/div>\n<\/div>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      const container = document.getElementById(\"bnet-tool-css-generator\");\n      \n      \/\/ Elements\n      const previewBox = container.querySelector(\"#preview-box\");\n      const cssOutput = container.querySelector(\"#css-output\");\n      const copyBtn = container.querySelector(\"#copy-btn\");\n      \n      \/\/ Shadow Inputs\n      const shadowX = container.querySelector(\"#shadow-x\");\n      const shadowY = container.querySelector(\"#shadow-y\");\n      const shadowBlur = container.querySelector(\"#shadow-blur\");\n      const shadowSpread = container.querySelector(\"#shadow-spread\");\n      const shadowColor = container.querySelector(\"#shadow-color\");\n      const shadowOpacity = container.querySelector(\"#shadow-opacity\");\n      const shadowInset = container.querySelector(\"#shadow-inset\");\n      \n      \/\/ Gradient Inputs\n      const gradientType = container.querySelector(\"#gradient-type\");\n      const gradientAngle = container.querySelector(\"#gradient-angle\");\n      const gradientColor1 = container.querySelector(\"#gradient-color-1\");\n      const gradientColor2 = container.querySelector(\"#gradient-color-2\");\n      const gradientEnable = container.querySelector(\"#gradient-enable\");\n      const gradientAngleGroup = container.querySelector(\"#gradient-angle-group\");\n\n      \/\/ Animation Inputs\n      const animationType = container.querySelector(\"#animation-type\");\n      const animationDuration = container.querySelector(\"#animation-duration\");\n      const animationDurationGroup = container.querySelector(\"#animation-duration-group\");\n\n      \/\/ Value Displays\n      const els = {\n        shadowX: container.querySelector(\"#shadow-x-val\"),\n        shadowY: container.querySelector(\"#shadow-y-val\"),\n        shadowBlur: container.querySelector(\"#shadow-blur-val\"),\n        shadowSpread: container.querySelector(\"#shadow-spread-val\"),\n        shadowOpacity: container.querySelector(\"#shadow-opacity-val\"),\n        gradientAngle: container.querySelector(\"#gradient-angle-val\"),\n        animationDuration: container.querySelector(\"#animation-duration-val\"),\n      };\n\n      \/\/ Tab Logic\n      const tabBtns = container.querySelectorAll(\".tab-btn\");\n      const tabContents = container.querySelectorAll(\".tab-content\");\n\n      tabBtns.forEach(btn => {\n        btn.addEventListener(\"click\", () => {\n          tabBtns.forEach(b => b.classList.remove(\"active\"));\n          tabContents.forEach(c => c.classList.remove(\"active\"));\n          \n          btn.classList.add(\"active\");\n          container.querySelector(`#${btn.dataset.target}`).classList.add(\"active\");\n        });\n      });\n\n      \/\/ Helper: HEX to RGBA\n      function hexToRgba(hex, opacity) {\n        let r = parseInt(hex.slice(1, 3), 16);\n        let g = parseInt(hex.slice(3, 5), 16);\n        let b = parseInt(hex.slice(5, 7), 16);\n        return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n      }\n\n      \/\/ Generate CSS\n      function generateCSS() {\n        \/\/ Shadow\n        const sX = shadowX.value;\n        const sY = shadowY.value;\n        const sB = shadowBlur.value;\n        const sS = shadowSpread.value;\n        const sO = shadowOpacity.value;\n        const sC = shadowColor.value;\n        const inset = shadowInset.checked ? \"inset \" : \"\";\n        const shadowString = `${inset}${sX}px ${sY}px ${sB}px ${sS}px ${hexToRgba(sC, sO)}`;\n\n        \/\/ Background\n        let backgroundString = \"#ffffff\"; \/\/ default fallback\n        if (gradientEnable.checked) {\n          const type = gradientType.value;\n          const angle = gradientAngle.value;\n          const c1 = gradientColor1.value;\n          const c2 = gradientColor2.value;\n          if (type === \"linear\") {\n            backgroundString = `linear-gradient(${angle}deg, ${c1}, ${c2})`;\n          } else {\n            backgroundString = `radial-gradient(circle, ${c1}, ${c2})`;\n          }\n        }\n\n        \/\/ Animation\n        const aType = animationType.value;\n        const aDur = animationDuration.value;\n        let animationString = \"\";\n        let keyframesString = \"\";\n        let extraStyles = \"\";\n\n        if (aType !== \"none\") {\n          animationString = `\\n  animation: ${aType} ${aDur}s infinite ease-in-out;`;\n          if (aType === \"pulse\") {\n            keyframesString = `\\n\\n@keyframes pulse {\\n  0% { transform: scale(1); }\\n  50% { transform: scale(1.05); }\\n  100% { transform: scale(1); }\\n}`;\n          } else if (aType === \"float\") {\n            keyframesString = `\\n\\n@keyframes float {\\n  0% { transform: translateY(0px); }\\n  50% { transform: translateY(-15px); }\\n  100% { transform: translateY(0px); }\\n}`;\n          } else if (aType === \"gradient-shift\") {\n            extraStyles = `\\n  background-size: 200% 200%;`;\n            keyframesString = `\\n\\n@keyframes gradient-shift {\\n  0% { background-position: 0% 50%; }\\n  50% { background-position: 100% 50%; }\\n  100% { background-position: 0% 50%; }\\n}`;\n          }\n        }\n\n        \/\/ Update displays\n        els.shadowX.innerText = sX + \"px\";\n        els.shadowY.innerText = sY + \"px\";\n        els.shadowBlur.innerText = sB + \"px\";\n        els.shadowSpread.innerText = sS + \"px\";\n        els.shadowOpacity.innerText = sO;\n        els.gradientAngle.innerText = gradientAngle.value + \"deg\";\n        els.animationDuration.innerText = aDur + \"s\";\n\n        \/\/ Toggle UI\n        gradientAngleGroup.style.display = gradientType.value === \"linear\" ? \"block\" : \"none\";\n        animationDurationGroup.style.display = aType !== \"none\" ? \"block\" : \"none\";\n\n        \/\/ Apply to Preview\n        previewBox.style.boxShadow = shadowString;\n        previewBox.style.background = backgroundString;\n        previewBox.style.animation = \"none\";\n        \n        \/\/ Force reflow for animation restart\n        void previewBox.offsetWidth;\n        \n        if (aType !== \"none\") {\n          previewBox.style.animation = `${aType} ${aDur}s infinite ease-in-out`;\n          if (aType === \"gradient-shift\") {\n            previewBox.style.backgroundSize = \"200% 200%\";\n          } else {\n            previewBox.style.backgroundSize = \"auto\";\n          }\n        } else {\n            previewBox.style.backgroundSize = \"auto\";\n        }\n\n        \/\/ Apply dynamic keyframes to document if they don't exist\n        let styleTag = document.getElementById(\"dynamic-preview-keyframes\");\n        if (!styleTag) {\n          styleTag = document.createElement(\"style\");\n          styleTag.id = \"dynamic-preview-keyframes\";\n          document.head.appendChild(styleTag);\n        }\n        styleTag.innerHTML = keyframesString;\n\n        \/\/ Build Output Code\n        const outputCode = `.my-element {\n  box-shadow: ${shadowString};\n  background: ${backgroundString};${extraStyles}${animationString}\n}${keyframesString}`;\n\n        cssOutput.innerText = outputCode;\n      }\n\n      \/\/ Event Listeners\n      const inputs = [\n        shadowX, shadowY, shadowBlur, shadowSpread, shadowColor, shadowOpacity, shadowInset,\n        gradientType, gradientAngle, gradientColor1, gradientColor2, gradientEnable,\n        animationType, animationDuration\n      ];\n\n      inputs.forEach(input => {\n        input.addEventListener(\"input\", generateCSS);\n        input.addEventListener(\"change\", generateCSS);\n      });\n\n      \/\/ Copy Functionality\n      copyBtn.addEventListener(\"click\", () => {\n        navigator.clipboard.writeText(cssOutput.innerText).then(() => {\n          const originalText = copyBtn.innerText;\n          copyBtn.innerText = \"\u05d4\u05d5\u05e2\u05ea\u05e7!\";\n          copyBtn.classList.add(\"copied\");\n          setTimeout(() => {\n            copyBtn.innerText = originalText;\n            copyBtn.classList.remove(\"copied\");\n          }, 2000);\n        });\n      });\n\n      \/\/ Init\n      generateCSS();\n    });\n  <\/script>\n<\/div>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebApplication\",\n  \"name\": \"\u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"All\",\n  \"description\": \"\u05db\u05dc\u05d9 \u05d7\u05d9\u05e0\u05de\u05d9 \u05d4\u05de\u05d0\u05e4\u05e9\u05e8 \u05d9\u05e6\u05d9\u05e8\u05ea \u05e7\u05d5\u05d3\u05d9 CSS \u05e2\u05d1\u05d5\u05e8 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea \u05d1\u05d0\u05de\u05e6\u05e2\u05d5\u05ea \u05de\u05de\u05e9\u05e7 \u05d5\u05d9\u05d6\u05d5\u05d0\u05dc\u05d9 \u05e0\u05d5\u05d7.\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"ILS\"\n  }\n}\n<\/script>\n<\/div>\n\n\n\n<div class=\"futur-glass-card seo-card\">\n\n\n\n<h2 class=\"wp-block-heading\">\u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea CSS &#8211; \u05d4\u05de\u05d3\u05e8\u05d9\u05da \u05d4\u05de\u05dc\u05d0 \u05dc\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e4\u05e7\u05d8\u05d9\u05dd \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd \u05dc\u05d0\u05ea\u05e8 \u05e9\u05dc\u05db\u05dd<\/h2>\n\n\n\n<p>\u05d1\u05e8\u05d5\u05db\u05d9\u05dd \u05d4\u05d1\u05d0\u05d9\u05dd \u05d0\u05dc <strong>\u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea CSS<\/strong> \u05d4\u05de\u05ea\u05e7\u05d3\u05dd \u05e9\u05dc Bsolution. \u05d1\u05e2\u05d9\u05d3\u05df \u05e9\u05d1\u05d5 \u05d4\u05e2\u05d9\u05e6\u05d5\u05d1 (UI\/UX) \u05e7\u05d5\u05d1\u05e2 \u05d0\u05ea \u05d4\u05d4\u05e6\u05dc\u05d7\u05d4 \u05e9\u05dc \u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d5\u05ea \u05d5\u05d0\u05ea\u05e8\u05d9\u05dd, \u05d9\u05e6\u05d9\u05e8\u05ea \u05de\u05de\u05e9\u05e7 \u05e9\u05e0\u05e8\u05d0\u05d4 \u05de\u05d5\u05d3\u05e8\u05e0\u05d9, \u05e0\u05e7\u05d9 \u05d5\u05d3\u05d9\u05e0\u05de\u05d9 \u05d4\u05d9\u05d0 \u05d7\u05d5\u05d1\u05d4. \u05d4\u05db\u05dc\u05d9 \u05e9\u05dc\u05e0\u05d5 \u05e0\u05d5\u05e2\u05d3 \u05dc\u05e2\u05d6\u05d5\u05e8 \u05dc\u05db\u05dd \u05dc\u05d9\u05d9\u05e6\u05e8 \u05d1\u05de\u05d3\u05d5\u05d9\u05e7 \u05d0\u05ea \u05d0\u05d5\u05ea\u05df \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05d4\u05e4\u05e0\u05d8\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05e8\u05db\u05d5\u05ea &#8211; \u05d4\u05db\u05dc \u05d3\u05e8\u05da \u05de\u05de\u05e9\u05e7 \u05e4\u05e9\u05d5\u05d8 \u05d5\u05dc\u05dc\u05d0 \u05e6\u05d5\u05e8\u05da \u05dc\u05db\u05ea\u05d5\u05d1 \u05e9\u05d5\u05e8\u05ea \u05e7\u05d5\u05d3 \u05d0\u05d7\u05ea \u05de\u05d0\u05e4\u05e1.<\/p>\n\n\n\n<p>\u05d1\u05e2\u05d6\u05e8\u05ea \u05de\u05de\u05e9\u05e7 \u05d4\u05e1\u05dc\u05d9\u05d9\u05d3\u05e8\u05d9\u05dd \u05d4\u05d9\u05d3\u05d9\u05d3\u05d5\u05ea\u05d9 \u05e9\u05dc\u05e0\u05d5, \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05e8\u05d0\u05d5\u05ea \u05d0\u05ea \u05d4\u05e9\u05d9\u05e0\u05d5\u05d9\u05d9\u05dd \u05de\u05ea\u05e8\u05d7\u05e9\u05d9\u05dd \u05d1\u05d6\u05de\u05df \u05d0\u05de\u05ea \u05d1\u05d0\u05d6\u05d5\u05e8 \u05d4\u05ea\u05e6\u05d5\u05d2\u05d4 \u05d4\u05de\u05e7\u05d3\u05d9\u05de\u05d4, \u05d5\u05db\u05e9\u05d4\u05d0\u05e4\u05e7\u05d8 \u05d4\u05de\u05d5\u05e9\u05dc\u05dd \u05d9\u05ea\u05e7\u05d1\u05dc &#8211; \u05db\u05dc \u05e9\u05e2\u05dc\u05d9\u05db\u05dd \u05dc\u05e2\u05e9\u05d5\u05ea \u05d4\u05d5\u05d0 \u05dc\u05d4\u05e2\u05ea\u05d9\u05e7 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d9\u05e9\u05d9\u05e8\u05d5\u05ea \u05d0\u05dc \u05d4\u05e4\u05e8\u05d5\u05d9\u05e7\u05d8 \u05e9\u05dc\u05db\u05dd.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u05d0\u05d9\u05da \u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd \u05d1\u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea CSS \u05e9\u05dc Bsolution?<\/h2>\n\n\n\n<p>\u05d4\u05db\u05dc\u05d9 \u05e9\u05dc\u05e0\u05d5 \u05d7\u05d5\u05dc\u05e7 \u05dc\u05de\u05e1\u05e4\u05e8 \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05e0\u05d5\u05d7\u05d5\u05ea \u05db\u05d3\u05d9 \u05dc\u05de\u05e0\u05d5\u05e2 \u05e2\u05d5\u05de\u05e1 \u05d5\u05dc\u05d4\u05e2\u05e0\u05d9\u05e7 \u05e9\u05dc\u05d9\u05d8\u05d4 \u05de\u05dc\u05d0\u05d4 \u05d1\u05db\u05dc \u05ea\u05db\u05d5\u05e0\u05d4 \u05e2\u05d9\u05e6\u05d5\u05d1\u05d9\u05ea. \u05d4\u05e0\u05d4 \u05e4\u05d9\u05e8\u05d5\u05d8 \u05e2\u05dc \u05d0\u05d9\u05da \u05dc\u05d4\u05e4\u05d9\u05e7 \u05de\u05de\u05e0\u05d5 \u05d0\u05ea \u05d4\u05de\u05d9\u05d8\u05d1:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. \u05d4\u05d2\u05d3\u05e8\u05ea \u05d4\u05d4\u05e6\u05dc\u05dc\u05d4 (Box-Shadow)<\/h3>\n\n\n\n<p>\u05d4\u05d4\u05e6\u05dc\u05dc\u05d4 \u05de\u05e2\u05e0\u05d9\u05e7\u05d4 \u05ea\u05d7\u05d5\u05e9\u05ea \u05e2\u05d5\u05de\u05e7 \u05dc\u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u05d5\u05d9\u05d5\u05e6\u05e8\u05ea \u05d4\u05e4\u05e8\u05d3\u05d4 \u05d1\u05e8\u05d5\u05e8\u05d4 \u05d1\u05d9\u05e0\u05dd \u05dc\u05d1\u05d9\u05df \u05d4\u05e8\u05e7\u05e2. \u05d1\u05dc\u05e9\u05d5\u05e0\u05d9\u05ea \u05d4&quot;\u05d4\u05e6\u05dc\u05dc\u05d4&quot; \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05e9\u05dc\u05d5\u05d8 \u05d1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u05ea\u05d6\u05d5\u05d6\u05d4 \u05d0\u05d5\u05e4\u05e7\u05d9\u05ea \u05d5\u05d0\u05e0\u05db\u05d9\u05ea (X\/Y Offset):<\/strong> \u05e7\u05d5\u05d1\u05e2\u05d9\u05dd \u05d4\u05d9\u05db\u05df \u05dc\u05de\u05e7\u05dd \u05d0\u05ea \u05d4\u05e6\u05dc\u05dc\u05d9\u05ea \u05d1\u05d9\u05d7\u05e1 \u05dc\u05d0\u05dc\u05de\u05e0\u05d8. \u05d4\u05e6\u05dc\u05dc\u05d4 \u05e7\u05dc\u05d0\u05e1\u05d9\u05ea \u05d1\u05d3\u05e8\u05da \u05db\u05dc\u05dc \u05d9\u05d5\u05e8\u05d3\u05ea \u05de\u05e2\u05d8 \u05dc\u05de\u05d8\u05d4.<\/li>\n\n<li><strong>\u05d8\u05e9\u05d8\u05d5\u05e9 (Blur):<\/strong> \u05de\u05d2\u05d3\u05d9\u05e8 \u05e2\u05d3 \u05db\u05de\u05d4 \u05d4\u05e6\u05dc\u05dc\u05d9\u05ea \u05e8\u05db\u05d4. \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05e8\u05e0\u05d9\u05d5\u05ea \u05e0\u05d5\u05d8\u05d5\u05ea \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d0\u05d5\u05d3 \u05de\u05d8\u05d5\u05e9\u05d8\u05e9\u05d5\u05ea (20px \u05d5\u05de\u05e2\u05dc\u05d4) \u05db\u05d3\u05d9 \u05dc\u05d3\u05de\u05d5\u05ea \u05ea\u05d0\u05d5\u05e8\u05d4 \u05e8\u05db\u05d4.<\/li>\n\n<li><strong>\u05e4\u05e8\u05d9\u05e1\u05d4 (Spread):<\/strong> \u05de\u05d0\u05e4\u05e9\u05e8 \u05dc\u05d4\u05d2\u05d3\u05d9\u05dc \u05d0\u05d5 \u05dc\u05db\u05d5\u05d5\u05e5 \u05d0\u05ea \u05e9\u05d8\u05d7 \u05d4\u05d4\u05e6\u05dc\u05dc\u05d4.<\/li>\n\n<li><strong>\u05e6\u05d1\u05e2 \u05d5\u05e9\u05e7\u05d9\u05e4\u05d5\u05ea:<\/strong> \u05d1\u05e0\u05d9\u05d2\u05d5\u05d3 \u05dc\u05e6\u05dc\u05dc\u05d9\u05ea \u05e9\u05d7\u05d5\u05e8\u05d4 \u05e7\u05e9\u05d9\u05d7\u05d4, \u05d4\u05e1\u05d5\u05d3 \u05dc\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9 \u05d4\u05d5\u05d0 \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05e9\u05e7\u05d9\u05e4\u05d5\u05ea (Opacity) \u05e0\u05de\u05d5\u05db\u05d4 \u05de\u05d0\u05d5\u05d3, \u05d1\u05e1\u05d1\u05d9\u05d1\u05d5\u05ea \u05d4-0.05 \u05e2\u05d3 0.15.<\/li>\n\n<li><strong>\u05d4\u05e6\u05dc\u05dc\u05d4 \u05e4\u05e0\u05d9\u05de\u05d9\u05ea (Inset):<\/strong> \u05d4\u05d5\u05e4\u05db\u05ea \u05d0\u05ea \u05d4\u05e6\u05dc\u05dc\u05d9\u05ea \u05dc\u05e6\u05dc\u05dc\u05d9\u05ea \u05e9\u05e0\u05db\u05e0\u05e1\u05ea \u05e4\u05e0\u05d9\u05de\u05d4 \u05dc\u05ea\u05d5\u05da \u05d4\u05d0\u05dc\u05de\u05e0\u05d8, \u05de\u05e2\u05d5\u05dc\u05d4 \u05dc\u05e2\u05d9\u05e6\u05d5\u05d1\u05d9 Neumorphism (\u05d3\u05de\u05d5\u05d9\u05d9 \u05d7\u05d5\u05de\u05e8\u05d4) \u05d0\u05d5 \u05e9\u05e7\u05e2\u05d9\u05dd \u05d1\u05d3\u05e3.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 (Gradients)<\/h3>\n\n\n\n<p>\u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2 \u05e0\u05db\u05d5\u05df \u05d9\u05db\u05d5\u05dc \u05dc\u05d4\u05e4\u05d5\u05da \u05d0\u05dc\u05de\u05e0\u05d8 \u05d0\u05e4\u05e8\u05d5\u05e8\u05d9 \u05dc\u05db\u05e4\u05ea\u05d5\u05e8 \u05d1\u05d5\u05dc\u05d8 \u05e9\u05de\u05d6\u05de\u05d9\u05df \u05d4\u05e7\u05dc\u05e7\u05d4. \u05d1\u05dc\u05e9\u05d5\u05e0\u05d9\u05ea \u05d4&quot;\u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2&quot; \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d1\u05d9\u05df \u05e1\u05d2\u05e0\u05d5\u05df <strong>\u05e7\u05d5\u05d5\u05d9\u05d5\u05d9 (Linear)<\/strong> \u05dc\u05d1\u05d9\u05df \u05e1\u05d2\u05e0\u05d5\u05df <strong>\u05e8\u05d3\u05d9\u05d0\u05dc\u05d9 (Radial)<\/strong>, \u05dc\u05e7\u05d1\u05d5\u05e2 \u05d0\u05ea \u05d4\u05d6\u05d5\u05d5\u05d9\u05ea \u05d4\u05de\u05d3\u05d5\u05d9\u05e7\u05ea \u05e9\u05dc \u05d4\u05de\u05e2\u05d1\u05e8, \u05d5\u05dc\u05d1\u05d7\u05d5\u05e8 \u05e9\u05e0\u05d9 \u05e6\u05d1\u05e2\u05d9\u05dd \u05e9\u05de\u05e9\u05ea\u05dc\u05d1\u05d9\u05dd \u05d1\u05d0\u05d5\u05e4\u05df \u05d4\u05e8\u05de\u05d5\u05e0\u05d9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. \u05e9\u05d9\u05dc\u05d5\u05d1 \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea CSS<\/h3>\n\n\n\n<p>\u05d0\u05d7\u05d3 \u05d4\u05e4\u05d9\u05e6'\u05e8\u05d9\u05dd \u05d4\u05de\u05d9\u05d5\u05d7\u05d3\u05d9\u05dd \u05e9\u05dc\u05e0\u05d5 \u05d4\u05d5\u05d0 \u05d4\u05d0\u05e4\u05e9\u05e8\u05d5\u05ea \u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8! \u05d1\u05d7\u05e8\u05d5 \u05d1\u05e1\u05d5\u05d2 \u05d4\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 &#8211; \u05dc\u05de\u05e9\u05dc &quot;\u05e4\u05e2\u05d9\u05de\u05d4&quot; (Pulse) \u05e9\u05de\u05d5\u05e9\u05db\u05ea \u05ea\u05e9\u05d5\u05de\u05ea \u05dc\u05d1 \u05dc\u05db\u05e4\u05ea\u05d5\u05e8\u05d9 \u05e7\u05e8\u05d9\u05d0\u05d4 \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4 (CTA), \u05d0\u05d5 &quot;\u05ea\u05e0\u05d5\u05d3\u05ea \u05e6\u05d1\u05e2&quot; (Gradient Shift) \u05e9\u05d9\u05d5\u05e6\u05e8\u05ea \u05d0\u05e4\u05e7\u05d8 \u05e9\u05dc \u05d6\u05e8\u05d9\u05de\u05d4 \u05de\u05ea\u05de\u05d3\u05ea \u05d1\u05e8\u05e7\u05e2. \u05d4\u05db\u05dc\u05d9 \u05e9\u05dc\u05e0\u05d5 \u05d9\u05d9\u05e6\u05e8 \u05e2\u05d1\u05d5\u05e8\u05db\u05dd \u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05ea \u05d2\u05dd \u05d0\u05ea \u05de\u05d0\u05e4\u05d9\u05d9\u05e0\u05d9 \u05d4\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d5\u05d2\u05dd \u05d0\u05ea \u05d1\u05dc\u05d5\u05e7 \u05d4-<code>@keyframes<\/code> \u05d4\u05e0\u05d3\u05e8\u05e9 \u05e2\u05d1\u05d5\u05e8 \u05d4-CSS \u05e9\u05dc\u05db\u05dd.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u05d4\u05d8\u05e8\u05e0\u05d3\u05d9\u05dd \u05d4\u05d7\u05de\u05d9\u05dd \u05d1\u05d9\u05d5\u05ea\u05e8 \u05d1\u05e2\u05d9\u05e6\u05d5\u05d1 \u05e0\u05db\u05d5\u05df \u05dc\u05d4\u05d9\u05d5\u05dd<\/h2>\n\n\n\n<p>\u05d0\u05dd \u05d0\u05ea\u05dd \u05de\u05d7\u05e4\u05e9\u05d9\u05dd \u05dc\u05e9\u05d3\u05e8\u05d2 \u05d0\u05ea \u05e0\u05e8\u05d0\u05d5\u05ea \u05d4\u05d0\u05ea\u05e8 \u05e9\u05dc\u05db\u05dd, \u05d4\u05e0\u05d4 \u05de\u05e1\u05e4\u05e8 \u05d8\u05e8\u05e0\u05d3\u05d9\u05dd \u05e9\u05db\u05d3\u05d0\u05d9 \u05dc\u05d4\u05db\u05d9\u05e8 \u05d5\u05dc\u05d9\u05d9\u05e9\u05dd \u05d1\u05e2\u05d6\u05e8\u05ea \u05de\u05d7\u05d5\u05dc\u05dc \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Glassmorphism:<\/strong> \u05e2\u05d9\u05e6\u05d5\u05d1 \u05d3\u05de\u05d5\u05d9 \u05d6\u05db\u05d5\u05db\u05d9\u05ea \u05d4\u05de\u05e9\u05dc\u05d1 \u05d4\u05e6\u05dc\u05dc\u05d4 \u05e8\u05db\u05d4 \u05de\u05d0\u05d5\u05d3 (\u05d8\u05e9\u05d8\u05d5\u05e9 \u05d2\u05d1\u05d5\u05d4 \u05d5\u05e9\u05e7\u05d9\u05e4\u05d5\u05ea \u05e0\u05de\u05d5\u05db\u05d4) \u05d9\u05d7\u05d3 \u05e2\u05dd \u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2 \u05d7\u05e6\u05d9 \u05e9\u05e7\u05d5\u05e3.<\/li>\n\n<li><strong>Neumorphism:<\/strong> \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05d4\u05e6\u05dc\u05dc\u05d4 \u05d7\u05d9\u05d5\u05d1\u05d9\u05ea \u05d5\u05e9\u05dc\u05d9\u05dc\u05d9\u05ea (\u05e8\u05d2\u05d9\u05dc\u05d4 \u05d5-Inset) \u05db\u05d3\u05d9 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05ea\u05d7\u05d5\u05e9\u05d4 \u05e9\u05d4\u05d0\u05dc\u05de\u05e0\u05d8 \u05e7\u05d5\u05e8\u05e5 \u05de\u05ea\u05d5\u05da \u05d4\u05e8\u05e7\u05e2 \u05e2\u05e6\u05de\u05d5.<\/li>\n\n<li><strong>\u05e6\u05d1\u05e2\u05d9\u05dd \u05e4\u05e1\u05d8\u05dc\u05d9\u05d9\u05dd \u05d5\u05e0\u05d9\u05d0\u05d5\u05df:<\/strong> \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05e8\u05db\u05d9\u05dd (\u05dc\u05de\u05e9\u05dc \u05de\u05d5\u05e8\u05d5\u05d3 \u05dc\u05ea\u05db\u05dc\u05ea) \u05d0\u05d5 \u05e0\u05d2\u05d9\u05e2\u05d5\u05ea \u05e0\u05d9\u05d0\u05d5\u05df \u05dc\u05d9\u05e6\u05d9\u05e8\u05ea \u05de\u05e8\u05d0\u05d4 \u05e2\u05ea\u05d9\u05d3\u05e0\u05d9 \u05d5\u05e2\u05de\u05d5\u05e7.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u05e9\u05d0\u05dc\u05d5\u05ea \u05e0\u05e4\u05d5\u05e6\u05d5\u05ea (FAQ) &#8211; \u05de\u05d7\u05d5\u05dc\u05dc \u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS<\/h2>\n\n\n\n<\/div>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea &#8211; \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_metadesc":"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.","tool_emoji":"\ud83c\udfa8","tool_category":"\u05db\u05dc\u05d9\u05dd \u05dc\u05d1\u05d5\u05e0\u05d9 \u05d0\u05ea\u05e8\u05d9\u05dd","tool_featured":"no","footnotes":""},"class_list":["post-50721","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd<\/title>\n<meta name=\"description\" content=\"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/\" \/>\n<meta property=\"og:locale\" content=\"he_IL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\" \/>\n<meta property=\"og:description\" content=\"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-31T20:42:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 \u05d3\u05e7\u05d5\u05ea\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/css-shadow-gradient-generator\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/he\\\/css-shadow-gradient-generator\\\/\",\"name\":\"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/#website\"},\"datePublished\":\"2026-05-31T20:40:42+00:00\",\"dateModified\":\"2026-05-31T20:42:05+00:00\",\"description\":\"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/css-shadow-gradient-generator\\\/#breadcrumb\"},\"inLanguage\":\"he-IL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/he\\\/css-shadow-gradient-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/css-shadow-gradient-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/he\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/he\\\/\",\"name\":\"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\",\"description\":\"\u05d0\u05d5\u05d8\u05d5\u05de\u05e6\u05d9\u05d5\u05ea \u05e9\u05d9\u05d5\u05d5\u05e7, \u05de\u05d7\u05e9\u05d1\u05d5\u05e0\u05d9\u05dd, \u05de\u05d7\u05d5\u05dc\u05dc\u05d9 \u05e7\u05d9\u05e9\u05d5\u05e8\u05d9\u05dd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/he\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"he-IL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","description":"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/","og_locale":"he_IL","og_type":"article","og_title":"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","og_description":"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.","og_url":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/","og_site_name":"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","article_modified_time":"2026-05-31T20:42:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da":"3 \u05d3\u05e7\u05d5\u05ea"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/","url":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/","name":"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS - \u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","isPartOf":{"@id":"https:\/\/bsolution.me\/he\/#website"},"datePublished":"2026-05-31T20:40:42+00:00","dateModified":"2026-05-31T20:42:05+00:00","description":"\u05e6\u05e8\u05d5 \u05d4\u05e6\u05dc\u05dc\u05d5\u05ea \u05d9\u05d5\u05e7\u05e8\u05ea\u05d9\u05d5\u05ea (Box-Shadow), \u05de\u05e2\u05d1\u05e8\u05d9 \u05e6\u05d1\u05e2 \u05de\u05e8\u05d4\u05d9\u05d1\u05d9\u05dd (Gradients) \u05d5\u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05d5\u05ea - \u05d5\u05d4\u05e2\u05ea\u05d9\u05e7\u05d5 \u05d0\u05ea \u05e7\u05d5\u05d3 \u05d4-CSS \u05d4\u05de\u05d5\u05db\u05df \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8.","breadcrumb":{"@id":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/#breadcrumb"},"inLanguage":"he-IL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/he\/css-shadow-gradient-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/he\/"},{"@type":"ListItem","position":2,"name":"\ud83c\udfa8 \u05e6\u05dc\u05dc\u05d9\u05d5\u05ea \u05d5\u05d0\u05e4\u05e7\u05d8\u05d9\u05dd CSS"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/he\/#website","url":"https:\/\/bsolution.me\/he\/","name":"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","description":"\u05d0\u05d5\u05d8\u05d5\u05de\u05e6\u05d9\u05d5\u05ea \u05e9\u05d9\u05d5\u05d5\u05e7, \u05de\u05d7\u05e9\u05d1\u05d5\u05e0\u05d9\u05dd, \u05de\u05d7\u05d5\u05dc\u05dc\u05d9 \u05e7\u05d9\u05e9\u05d5\u05e8\u05d9\u05dd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/he\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"he-IL"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/comments?post=50721"}],"version-history":[{"count":2,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50721\/revisions"}],"predecessor-version":[{"id":50725,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50721\/revisions\/50725"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/media?parent=50721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}