[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fworking-with-css-gradients":671,"blog-author-\u002Fblog\u002Fworking-with-css-gradients":1275,"i-material-symbols:arrow-back-rounded":1287},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1261,"date":1262,"description":1263,"draft":1264,"editorsPick":1264,"extension":1265,"featured":1264,"image":1266,"imageAlt":1267,"meta":1268,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1269,"seo":1270,"stem":1271,"tags":1272,"__hash__":1274},"blog\u002Fblog\u002Fworking-with-css-gradients.md","Working With CSS Gradients","Queendarlin Nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ffundamentals-of-the-css-float-and-clear-properties\u002Fauthor.jpeg",null,"queendarlin-nnamani",{"type":679,"value":680,"toc":1247},"minimark",[681,685,690,700,704,707,726,730,733,747,759,771,775,789,792,812,815,820,834,840,843,853,860,863,870,873,879,881,887,893,895,901,904,910,916,922,924,930,936,939,941,947,953,956,962,972,974,980,986,988,994,1000,1002,1008,1014,1016,1022,1026,1041,1047,1053,1059,1062,1068,1074,1080,1086,1088,1094,1097,1107,1113,1119,1121,1127,1131,1134,1140,1146,1152,1155,1161,1171,1177,1183,1185,1191,1195,1198,1210,1220,1230,1240,1244],[682,683,684],"p",{},"One of the fantastic features that HTML5 has made available to web developers is the ability to establish gradients using CSS3. This feature has enabled the use of gradient effects for backgrounds instead of images. This article will explain what a gradient is, the different types of CSS gradients, and several ways you can use these gradients to create unique backgrounds for your websites. In addition, you’ll learn some tools for generating CSS gradients. So, let's delve into it!",[686,687,689],"h2",{"id":688},"what-are-gradients","What Are Gradients?",[682,691,692,699],{},[693,694,698],"a",{"href":695,"rel":696},"https:\u002F\u002Felementor.com\u002Fblog\u002Fgradients-in-web-design\u002F#:~:text=A%20gradient%20is%20a%20gradual,add%20depth%20to%20an%20image.",[697],"nofollow","Gradients"," are a visual effect that appears as a gradual blend or change from one color into another. CSS gradients help you to build a smooth transition between the colors.",[686,701,703],{"id":702},"why-use-gradients","Why Use Gradients?",[682,705,706],{},"There are several reasons we use gradients:",[708,709,710,714,717,720,723],"ul",{},[711,712,713],"li",{},"To create an exciting user interface for our web pages.",[711,715,716],{},"To allow us the privilege of being creative; we can make attractive and captivating designs by blending colors.",[711,718,719],{},"To increase depth and dimension in our web page backgrounds instead of creating designs that look flat.",[711,721,722],{},"To bypass the general rule of avoiding the use of more than two or three colors.",[711,724,725],{},"To help draw attention to our websites.",[686,727,729],{"id":728},"types-of-css-gradients","Types of CSS Gradients",[682,731,732],{},"All gradients have a central point where the color begins to blend into others**.** We will be looking at three different types of CSS gradients:",[682,734,735,743,746],{},[693,736,739],{"href":737,"rel":738},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgradient\u002Flinear-gradient",[697],[740,741,742],"strong",{},"CSS Linear Gradient",[740,744,745],{},":"," This is the most common type of gradient and requires the direction and starting points of transition for the gradient effect. It uses two or three colors that blend evenly in a straight line. The color transition can go left, right, up, down or diagonally. Two colors are commonly used in linear gradients, although more than two colors can work, too.",[682,748,749,756,758],{},[693,750,753],{"href":751,"rel":752},"https:\u002F\u002Fwww.freecodecamp.org\u002Fnews\u002Fcss-radial-gradient\u002F",[697],[740,754,755],{},"CSS Radial Gradient",[740,757,745],{}," This type of gradient starts at one point that radiates outward. The color begins at the element's center and fades at an equal rate as it transitions outward in all directions. The shape of the radial gradient is, by default, elliptical.",[682,760,761,768,770],{},[693,762,765],{"href":763,"rel":764},"https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fcss-conic-gradients",[697],[740,766,767],{},"CSS Conic Gradients",[740,769,745],{}," In this type of gradient, the focal point is rotated around the center. The center starts by default at 50%, faces upwards, and the color stops are evenly spaced. However, you can change the proportion of the color stops as well as the starting position. Conic gradients are helpful in pie charts. Also, conic gradients are similar to radial gradients as they are circular and use their element's center as the point for color stops. The difference is that the color stops of the radial gradient arise from the circle's center, while the conic gradient has its color stops around the circle.",[686,772,774],{"id":773},"how-gradients-work-in-css","How Gradients Work in CSS",[682,776,777,778,782,783,788],{},"CSS gradients make use of ",[779,780,781],"code",{},"background-image",". In CSS, you can control every area of how gradients work, from the colors and their transitions to directions. In addition, the gradients use a ",[693,784,787],{"href":785,"rel":786},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Functions",[697],"CSS function"," to allow many color transitions. The colors can take different formats like HEX, HSLA, RGBA, or named colors.",[682,790,791],{},"In order to understand how gradients work, there are several points to consider:",[708,793,794,803,806,809],{},[711,795,796,797,802],{},"You must be intentional when choosing colors because not all colors go well together. Learn more about choosing ",[693,798,801],{"href":799,"rel":800},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fchoosing-colors-in-user-interface-design",[697],"colors here",".",[711,804,805],{},"To avoid a grayish center, choose three colors instead of two.",[711,807,808],{},"The colors must blend well enough that users cannot see where the transition occurred.",[711,810,811],{},"You need to understand the different types of gradients to know how gradients work in CSS.",[682,813,814],{},"Now, let’s look at the different properties of CSS gradients, with examples.",[816,817,819],"h3",{"id":818},"linear-gradient-effects-properties","Linear Gradient Effects Properties",[682,821,822,823,826,827,830,831,833],{},"We identify linear gradients using the ",[779,824,825],{},"linear-gradient()"," function in the ",[779,828,829],{},"background"," or ",[779,832,781],{}," property, and it must include two or more color values. The default setting of linear gradients is from top to bottom of the element, giving a smooth transition from the first color value to the second. However, we can change this direction with keywords or define degree values before color values. Here are some of the effects linear gradients can have:",[682,835,836,839],{},[740,837,838],{},"Top to Bottom (Default):"," This is the default effect of linear gradients and describes a linear gradient with the starting point at the top, ending at the bottom.",[682,841,842],{},"Example:",[844,845,850],"pre",{"className":846,"code":848,"language":849},[847],"language-text","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-style: italic;\n            font-weight: bold;\n            padding: 90px;\n            height: 200px;\n            background-color: brown;\n            background-image: linear-gradient(red, yellow, green);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Linear Gradient - Top to Bottom\u003C\u002Fh1>\n    \u003Cp>A linear gradient with red transitioning smoothly into yellow and yellow into green:\u003C\u002Fp>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","text",[779,851,848],{"__ignoreMap":852},"",[682,854,855],{},[693,856,859],{"href":857,"rel":858},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=03a048a3f4",[697],"Save this code",[682,861,862],{},"Here is the result:",[682,864,865],{},[866,867],"img",{"alt":868,"src":869},"a linear gradient with red transitioning to yellow and then to green from top to bottom","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-001.png",[682,871,872],{},"This default effect of a linear gradient shows how three different colors transition smoothly from top to bottom.",[682,874,875,878],{},[740,876,877],{},"Left to Right:"," This property shows a color transition from the left to the right.",[682,880,842],{},[844,882,885],{"className":883,"code":884,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-weight: bold;\n            font-style: italic;\n            height: 200px;\n            background-color: red;\n            padding: 90px;\n            background-image: linear-gradient(to right, red, yellow, green);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Linear Gradient - Left to Right\u003C\u002Fh1>\n    \u003Cp>A linear gradient with red transitioning smoothly from the left to yellow and green to the right\u003C\u002Fp>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,886,884],{"__ignoreMap":852},[682,888,889],{},[693,890,859],{"href":891,"rel":892},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=34c94597e4",[697],[682,894,862],{},[682,896,897],{},[866,898],{"alt":899,"src":900},"a linear gradient with red transitioning to yellow and then to green from left to right","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-002.png",[682,902,903],{},"Observe how the transitioning flows from left to right.",[682,905,906,909],{},[740,907,908],{},"Diagonal:"," This shows a diagonal transition from top-left to bottom-right:",[844,911,914],{"className":912,"code":913,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-weight: bolder;\n            font-style: italic;\n            height: 200px;\n            background-color: red;\n            padding: 90px;\n            background-image: linear-gradient(to bottom right, red, yellow, green);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Linear Gradient - Diagonal\u003C\u002Fh1>\n    \u003Cp>A linear gradient with red transitioning smoothly from the top-left to yellow and green to the bottom-right\u003C\u002Fp>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,915,913],{"__ignoreMap":852},[682,917,918],{},[693,919,859],{"href":920,"rel":921},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=e2a241b824",[697],[682,923,862],{},[682,925,926],{},[866,927],{"alt":928,"src":929},"a linear gradient with red transitioning to yellow and then to green on the diagonal","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-003.png",[682,931,932,935],{},[740,933,934],{},"Angles:"," With this property, you can implement different directions by setting an angle instead of using predefined directions like the ones discussed above (top, bottom, left, right, etc.).",[682,937,938],{},"Various angles have different effects. With gradient angles, the starting point of 0 degrees is equal to the top, and at each 90 degree interval in a clockwise circle is represented accordingly. For example, 180 degrees would be the bottom. In addition, you can transition colors from the zero starting point in positive or negative angles. A positive angle moves the gradient in a clockwise direction, while a negative angle moves it counterclockwise.",[682,940,842],{},[844,942,945],{"className":943,"code":944,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy1 {\n            font-size: 35px;\n            padding: 30px;\n            height: 100px;\n            background-color: red;\n            background-image: linear-gradient(0deg, red, yellow, green);\n        }\n        .icy2 {\n            font-size: 35px;\n            padding: 30px;\n            height: 100px;\n            background-color: red;\n            background-image: linear-gradient(90deg, red, yellow, green);\n        }\n        .icy3 {\n            font-size: 35px;\n            padding: 30px;\n            height: 100px;\n            background-color: red;\n            background-image: linear-gradient(180deg, red, yellow, green);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Linear Gradients - Using Different Angles\u003C\u002Fh1>\n    \u003Cdiv class=\"icy1\" style=\"text-align:center\">0 degree\u003C\u002Fdiv>\n    \u003Cbr>\n    \u003Cdiv class=\"icy2\" style=\"text-align:center\">90 degree\u003C\u002Fdiv>\n    \u003Cbr>\n    \u003Cdiv class=\"icy3\" style=\"text-align:center\">180 degree\u003C\u002Fdiv>\n    \u003Cbr>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,946,944],{"__ignoreMap":852},[682,948,949],{},[693,950,859],{"href":951,"rel":952},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=91374b9aba",[697],[682,954,955],{},"Here is result:",[682,957,958],{},[866,959],{"alt":960,"src":961},"3 linear gradients with red transitioning to yellow and then to green using three different angles","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-004.png",[682,963,964,967,968,971],{},[740,965,966],{},"Transparency Effect:"," You can also use CSS linear gradients to create a fading effect. To use transparency, the ",[779,969,970],{},"rgba()"," function plays a role in defining color stops, and the value 0 to 1 specifies the transparency of the color. A value of 0 shows full transparency, while 1 shows fully opaque color, with no transparency.",[682,973,842],{},[844,975,978],{"className":976,"code":977,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            padding: 90px;\n            height: 200px;\n            background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 255, 0, 1), rgba(0, 128, 0, 0));\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Linear Gradient - Transparency\u003C\u002Fh1>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,979,977],{"__ignoreMap":852},[682,981,982],{},[693,983,859],{"href":984,"rel":985},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=06e5479afb",[697],[682,987,862],{},[682,989,990],{},[866,991],{"alt":992,"src":993},"linear gradient from left to right that goes from red to yellow to transparent","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-005.png",[682,995,996,999],{},[740,997,998],{},"Repeating Linear Gradient:"," This property makes it possible to use multiple linear gradients with a single function.",[682,1001,842],{},[844,1003,1006],{"className":1004,"code":1005,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy1 {\n            height: 200px;\n            background-color: red;\n            background-image: repeating-linear-gradient(red, yellow 10%, green 20%);\n        }\n\n        .icy2 {\n            height: 200px;\n            background-color: red;\n            background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Repeating Linear Gradient\u003C\u002Fh1>\n    \u003Cdiv class=\"icy1\">\u003C\u002Fdiv>\n    \u003Cp>A repeating gradient with 0 degrees starting red and ending with green:\u003C\u002Fp>\n    \u003Cdiv class=\"icy2\">\u003C\u002Fdiv>\n    \u003Cp>A repeating gradient with 90 degrees starting red and ending with green:\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1007,1005],{"__ignoreMap":852},[682,1009,1010],{},[693,1011,859],{"href":1012,"rel":1013},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=b1c04bb4bf",[697],[682,1015,862],{},[682,1017,1018],{},[866,1019],{"alt":1020,"src":1021},"repeating linear gradients starting with red and ending in green","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-006.png",[816,1023,1025],{"id":1024},"radial-gradient-effects-properties","Radial Gradient Effects Properties",[682,1027,1028,1029,1032,1033,830,1035,1037,1038,1040],{},"Radial gradients use the ",[779,1030,1031],{},"radial-gradient()"," function in ",[779,1034,829],{},[779,1036,781],{}," property instead of the ",[779,1039,825],{}," function. This effect’s properties include the following:",[682,1042,1043,1046],{},[740,1044,1045],{},"Evenly Spaced (Default):"," This is the default effect of a radial gradient, and creates evenly spaced color stops, as shown below.",[844,1048,1051],{"className":1049,"code":1050,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-style: italic;\n            height: 200px;\n            width: 800px;\n            background-image: radial-gradient(red, yellow, green);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>The Default Effect of Radial Gradient - Evenly Spaced Color Stops\u003C\u002Fh1>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1052,1050],{"__ignoreMap":852},[682,1054,1055],{},[693,1056,859],{"href":1057,"rel":1058},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=333749af16",[697],[682,1060,1061],{},"Here is the result. Notice how all the color stops are evenly distributed:",[682,1063,1064],{},[866,1065],{"alt":1066,"src":1067},"radial gradient with evenly spaced color stops of red, yellow, and green","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-007.png",[682,1069,1070,1073],{},[740,1071,1072],{},"Differently Spaced:"," This effect allows for radial gradients with color stops of varying spaces.",[844,1075,1078],{"className":1076,"code":1077,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-weight: bold;\n            font-style: italic;\n            height: 200px;\n            width: 800px;\n            background-image: radial-gradient(red 10%, yellow 20%, green 50%);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch3>Radial Gradient with Different Color Stops Spacing\u003C\u002Fh3>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n    \u003Cdiv id=\"grad1\">\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1079,1077],{"__ignoreMap":852},[682,1081,1082],{},[693,1083,859],{"href":1084,"rel":1085},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=94054f8f37",[697],[682,1087,862],{},[682,1089,1090],{},[866,1091],{"alt":1092,"src":1093},"radial gradient with unevenly spaced color stops of red, yellow, and green","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-008.png",[682,1095,1096],{},"Observe the different spacing of the color stops, with green being larger than others. This is because green has 50% of the gradients.",[682,1098,1099,1102,1103,1106],{},[740,1100,1101],{},"Repeating Radial Gradient:"," This property makes it possible to replicate radial gradients with the ",[779,1104,1105],{},"repeating-radial-gradient()"," function, as shown below.",[844,1108,1111],{"className":1109,"code":1110,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-weight: bold;\n            font-size: 35px;\n            height: 200px;\n            width: 800px;\n            background-color: red;\n            background-image: repeating-radial-gradient(red, blue 10%, yellow 5%, green 15%);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Repeating Radial Gradient\u003C\u002Fh1>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1112,1110],{"__ignoreMap":852},[682,1114,1115],{},[693,1116,859],{"href":1117,"rel":1118},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=aa514cad2f",[697],[682,1120,862],{},[682,1122,1123],{},[866,1124],{"alt":1125,"src":1126},"A repeating radial gradient with red green and blue","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-009.png",[816,1128,1130],{"id":1129},"conic-gradient-effects-properties","Conic Gradient Effects Properties",[682,1132,1133],{},"The gradient effects for conic gradients include the following:",[682,1135,1136,1139],{},[740,1137,1138],{},"Multiple Color Conic Gradients:"," The example below shows a conic gradient with many colors. Notice how four different colors show a conic gradient effect with the color stops around it.",[844,1141,1144],{"className":1142,"code":1143,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            text-align: center;\n            font-size: 35px;\n            font-style: italic;\n            font-weight: bold;\n            height: 200px;\n            width: 300px;\n            background-color: red;\n            background-image: conic-gradient(red, yellow, green, blue);\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Multiple Color Conic Gradient\u003C\u002Fh1>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1145,1143],{"__ignoreMap":852},[682,1147,1148],{},[693,1149,859],{"href":1150,"rel":1151},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=7e9940b3ca",[697],[682,1153,1154],{},"See the result:",[682,1156,1157],{},[866,1158],{"alt":1159,"src":1160},"multiple color rainbow conic gradient","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-010.png",[682,1162,1163,1166,1167,1170],{},[740,1164,1165],{},"Repeating Conic Gradients:"," A ",[779,1168,1169],{},"repeating-conic-gradient()"," function is what you use to show the following effect. Notice how repeated color gradients show a conic gradient effect with many color starts and stops.",[844,1172,1175],{"className":1173,"code":1174,"language":849},[847],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .icy {\n            height: 200px;\n            width: 200px;\n            background-color: red;\n            background-image: repeating-conic-gradient(\n                red 0deg 10deg, \n                yellow 10deg 20deg, \n                blue 20deg 30deg, \n                green 30deg 40deg\n            );\n            border-radius: 50%; \u002F* Makes it circular *\u002F\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Repeating a Conic Gradient\u003C\u002Fh1>\n    \u003Cdiv class=\"icy\">Icyqueen\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[779,1176,1174],{"__ignoreMap":852},[682,1178,1179],{},[693,1180,859],{"href":1181,"rel":1182},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=97d843acfe",[697],[682,1184,1154],{},[682,1186,1187],{},[866,1188],{"alt":1189,"src":1190},"repeating conic gradient with red, yellow, green, and blue","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fimg-011.png",[686,1192,1194],{"id":1193},"css-gradient-generator-tools","CSS Gradient Generator Tools",[682,1196,1197],{},"Sometimes it can be tedious working with CSS gradients manually, especially if you’re new to them. Thankfully, some CSS gradient generator tools allow you to use CSS gradients with ease. These tools perform different functions and have a variety of features. Here are some CSS gradient generator tools to explore:",[682,1199,1200,1207,1209],{},[693,1201,1204],{"href":1202,"rel":1203},"https:\u002F\u002Fmycolor.space\u002Fgradient?ori=to+right+top&hex=%23051937&hex2=%23A8EB12&sub=1",[697],[740,1205,1206],{},"Colorspace",[740,1208,745],{}," This tool initially used two color generators, but a Beta feature of generating three color gradients has been added. With this tool, you can play with the colors to get the desired gradient effect, and then copy the generated CSS code for your project. This tool only generates linear gradients, but you can use the CSS colors in radial and conic gradients.",[682,1211,1212,1219],{},[693,1213,1216],{"href":1214,"rel":1215},"https:\u002F\u002Fwww.learnui.design\u002Ftools\u002Fgradient-generator.html",[697],[740,1217,1218],{},"Vivid Gradient Generator Tool",": This CSS gradient tool allows you to generate three different color systems (HCL, HSB and HSL). In addition, you can also export a gradient as an SVG image and develop any of the three CSS gradient types by simply clicking \"Copy CSS.\"",[682,1221,1222,1229],{},[693,1223,1226],{"href":1224,"rel":1225},"https:\u002F\u002Fwww.joshwcomeau.com\u002Fgradient-generator\u002F",[697],[740,1227,1228],{},"Gradient Generator",": This tool uses an easing curve for color distribution control, but it only has the linear gradient feature. You can copy the CSS code for the gradient you create.",[682,1231,1232,1239],{},[693,1233,1236],{"href":1234,"rel":1235},"https:\u002F\u002Fangrytools.com\u002Fgradient\u002F",[697],[740,1237,1238],{},"Online Gradient Generator",": This is an excellent tool; you can blend two or more colors smoothly. In addition, you can generate four types of gradients with it: linear, radial, elliptical and conical. You can also generate CSS code and download the image of the gradient.",[686,1241,1243],{"id":1242},"conclusion","Conclusion",[682,1245,1246],{},"You can now use the CSS gradients effortlessly. Try using them in your projects regularly and see the fantastic things you can create. Explore these tools to master CSS gradients for your new designs.",{"title":852,"searchDepth":1248,"depth":1248,"links":1249},2,[1250,1251,1252,1253,1259,1260],{"id":688,"depth":1248,"text":689},{"id":702,"depth":1248,"text":703},{"id":728,"depth":1248,"text":729},{"id":773,"depth":1248,"text":774,"children":1254},[1255,1257,1258],{"id":818,"depth":1256,"text":819},3,{"id":1024,"depth":1256,"text":1025},{"id":1129,"depth":1256,"text":1130},{"id":1193,"depth":1248,"text":1194},{"id":1242,"depth":1248,"text":1243},"Software Development","2023-01-17T00:00:00.000Z","This article will explain what a gradient is, the different types of CSS gradients, and several ways you can create unique backgrounds for your websites.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fworking-with-css-gradients\u002Fhero.jpeg","decorative cover image showing a gradient",{},"\u002Fblog\u002Fworking-with-css-gradients",{"title":673,"description":1263},"blog\u002Fworking-with-css-gradients",[1273],"css; ui","54hX9Mz0TsUWHzoXOPxrTXRMbMJlkN7knplC5ahtLJg",{"id":1276,"title":674,"body":1277,"description":852,"draft":1264,"extension":1265,"meta":1281,"navigation":32,"path":1282,"photo":1283,"photoAlt":676,"seo":1284,"stem":1285,"__hash__":1286},"authors\u002Fauthors\u002Fqueendarlin-nnamani.md",{"type":679,"value":1278,"toc":1279},[],{"title":852,"searchDepth":1248,"depth":1248,"links":1280},[],{},"\u002Fauthors\u002Fqueendarlin-nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fqueendarlin-nnamani.png",{"title":674,"description":852},"authors\u002Fqueendarlin-nnamani","ew_I3Z8CxdVOnSUhwhpJJkL5-zlWp8KOHxMXo_C6lDw",{"left":1288,"top":1288,"width":1289,"height":1289,"rotate":1288,"vFlip":1264,"hFlip":1264,"body":1290},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]