[{"data":1,"prerenderedAt":3096},["ShallowReactive",2],{"blog-regex-cheat-sheet-for-developers":3,"blog-all-for-nav":764},{"id":4,"title":5,"author":6,"body":7,"date":753,"description":754,"extension":755,"meta":756,"navigation":260,"path":757,"readingTime":420,"relatedTool":758,"seo":759,"stem":760,"tags":761,"__hash__":763},"blog\u002Fblog\u002Fregex-cheat-sheet-for-developers.md","Regex Cheat Sheet: The Only Guide You'll Ever Need","Codeyaan",{"type":8,"value":9,"toc":734},"minimark",[10,14,18,23,142,146,219,229,277,281,329,344,348,373,377,435,439,444,453,457,466,470,479,483,492,496,505,509,518,522,580,584,670,674,717,721,730],[11,12,5],"h1",{"id":13},"regex-cheat-sheet-the-only-guide-youll-ever-need",[15,16,17],"p",{},"Regular expressions are one of those tools that feel like dark magic until you learn the patterns. This cheat sheet covers everything you need for day-to-day development.",[19,20,22],"h2",{"id":21},"the-basics","The Basics",[24,25,26,42],"table",{},[27,28,29],"thead",{},[30,31,32,36,39],"tr",{},[33,34,35],"th",{},"Pattern",[33,37,38],{},"Matches",[33,40,41],{},"Example",[43,44,45,63,79,95,111,127],"tbody",{},[30,46,47,54,57],{},[48,49,50],"td",{},[51,52,53],"code",{},".",[48,55,56],{},"Any character except newline",[48,58,59,62],{},[51,60,61],{},"a.c"," → \"abc\", \"a1c\"",[30,64,65,70,73],{},[48,66,67],{},[51,68,69],{},"\\d",[48,71,72],{},"Any digit (0-9)",[48,74,75,78],{},[51,76,77],{},"\\d\\d"," → \"42\"",[30,80,81,86,89],{},[48,82,83],{},[51,84,85],{},"\\w",[48,87,88],{},"Word character (a-z, A-Z, 0-9, _)",[48,90,91,94],{},[51,92,93],{},"\\w+"," → \"hello_world\"",[30,96,97,102,105],{},[48,98,99],{},[51,100,101],{},"\\s",[48,103,104],{},"Whitespace (space, tab, newline)",[48,106,107,110],{},[51,108,109],{},"\\s+"," → \"   \"",[30,112,113,118,121],{},[48,114,115],{},[51,116,117],{},"\\D",[48,119,120],{},"NOT a digit",[48,122,123,126],{},[51,124,125],{},"\\D+"," → \"abc\"",[30,128,129,134,137],{},[48,130,131],{},[51,132,133],{},"\\W",[48,135,136],{},"NOT a word character",[48,138,139,141],{},[51,140,133],{}," → \"@\", \"!\"",[19,143,145],{"id":144},"quantifiers","Quantifiers",[24,147,148,157],{},[27,149,150],{},[30,151,152,154],{},[33,153,35],{},[33,155,156],{},"Meaning",[43,158,159,169,179,189,199,209],{},[30,160,161,166],{},[48,162,163],{},[51,164,165],{},"*",[48,167,168],{},"0 or more",[30,170,171,176],{},[48,172,173],{},[51,174,175],{},"+",[48,177,178],{},"1 or more",[30,180,181,186],{},[48,182,183],{},[51,184,185],{},"?",[48,187,188],{},"0 or 1 (optional)",[30,190,191,196],{},[48,192,193],{},[51,194,195],{},"{3}",[48,197,198],{},"Exactly 3",[30,200,201,206],{},[48,202,203],{},[51,204,205],{},"{2,5}",[48,207,208],{},"Between 2 and 5",[30,210,211,216],{},[48,212,213],{},[51,214,215],{},"{3,}",[48,217,218],{},"3 or more",[15,220,221,225,226,228],{},[222,223,224],"strong",{},"Greedy vs Lazy",": By default, quantifiers are greedy (match as much as possible). Add ",[51,227,185],{}," to make them lazy:",[230,231,236],"pre",{"className":232,"code":233,"language":234,"meta":235,"style":235},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Greedy: matches the longest possible string\n\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*>\u002F);  \u002F\u002F \"\u003Cdiv>hello\u003C\u002Fdiv>\"\n\n\u002F\u002F Lazy: matches the shortest possible string\n\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*?>\u002F); \u002F\u002F \"\u003Cdiv>\"\n","javascript","",[51,237,238,246,255,262,268],{"__ignoreMap":235},[239,240,243],"span",{"class":241,"line":242},"line",1,[239,244,245],{},"\u002F\u002F Greedy: matches the longest possible string\n",[239,247,249,252],{"class":241,"line":248},2,[239,250,251],{},"\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*>\u002F);",[239,253,254],{},"  \u002F\u002F \"\u003Cdiv>hello\u003C\u002Fdiv>\"\n",[239,256,258],{"class":241,"line":257},3,[239,259,261],{"emptyLinePlaceholder":260},true,"\n",[239,263,265],{"class":241,"line":264},4,[239,266,267],{},"\u002F\u002F Lazy: matches the shortest possible string\n",[239,269,271,274],{"class":241,"line":270},5,[239,272,273],{},"\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*?>\u002F);",[239,275,276],{}," \u002F\u002F \"\u003Cdiv>\"\n",[19,278,280],{"id":279},"anchors","Anchors",[24,282,283,291],{},[27,284,285],{},[30,286,287,289],{},[33,288,35],{},[33,290,156],{},[43,292,293,307,319],{},[30,294,295,300],{},[48,296,297],{},[51,298,299],{},"^",[48,301,302,303,306],{},"Start of string (or line with ",[51,304,305],{},"m"," flag)",[30,308,309,314],{},[48,310,311],{},[51,312,313],{},"$",[48,315,316,317,306],{},"End of string (or line with ",[51,318,305],{},[30,320,321,326],{},[48,322,323],{},[51,324,325],{},"\\b",[48,327,328],{},"Word boundary",[230,330,332],{"className":232,"code":331,"language":234,"meta":235,"style":235},"\u002F^\\d+$\u002F.test(\"12345\");  \u002F\u002F true — entire string is digits\n\u002F^\\d+$\u002F.test(\"123ab\");  \u002F\u002F false\n",[51,333,334,339],{"__ignoreMap":235},[239,335,336],{"class":241,"line":242},[239,337,338],{},"\u002F^\\d+$\u002F.test(\"12345\");  \u002F\u002F true — entire string is digits\n",[239,340,341],{"class":241,"line":248},[239,342,343],{},"\u002F^\\d+$\u002F.test(\"123ab\");  \u002F\u002F false\n",[19,345,347],{"id":346},"character-classes","Character Classes",[230,349,351],{"className":232,"code":350,"language":234,"meta":235,"style":235},"[abc]     \u002F\u002F a, b, or c\n[a-z]     \u002F\u002F any lowercase letter\n[A-Z0-9]  \u002F\u002F uppercase letter or digit\n[^abc]    \u002F\u002F NOT a, b, or c (negation)\n",[51,352,353,358,363,368],{"__ignoreMap":235},[239,354,355],{"class":241,"line":242},[239,356,357],{},"[abc]     \u002F\u002F a, b, or c\n",[239,359,360],{"class":241,"line":248},[239,361,362],{},"[a-z]     \u002F\u002F any lowercase letter\n",[239,364,365],{"class":241,"line":257},[239,366,367],{},"[A-Z0-9]  \u002F\u002F uppercase letter or digit\n",[239,369,370],{"class":241,"line":264},[239,371,372],{},"[^abc]    \u002F\u002F NOT a, b, or c (negation)\n",[19,374,376],{"id":375},"groups-and-capturing","Groups and Capturing",[230,378,380],{"className":232,"code":379,"language":234,"meta":235,"style":235},"\u002F\u002F Capturing group\nconst match = \"2026-05-12\".match(\u002F(\\d{4})-(\\d{2})-(\\d{2})\u002F);\n\u002F\u002F match[1] = \"2026\", match[2] = \"05\", match[3] = \"12\"\n\n\u002F\u002F Named group\nconst match2 = \"2026-05-12\".match(\u002F(?\u003Cyear>\\d{4})-(?\u003Cmonth>\\d{2})-(?\u003Cday>\\d{2})\u002F);\n\u002F\u002F match2.groups.year = \"2026\"\n\n\u002F\u002F Non-capturing group (just for grouping, no capture)\n\u002F(?:https?):\\\u002F\\\u002F\u002F\n",[51,381,382,387,392,397,401,406,412,418,423,429],{"__ignoreMap":235},[239,383,384],{"class":241,"line":242},[239,385,386],{},"\u002F\u002F Capturing group\n",[239,388,389],{"class":241,"line":248},[239,390,391],{},"const match = \"2026-05-12\".match(\u002F(\\d{4})-(\\d{2})-(\\d{2})\u002F);\n",[239,393,394],{"class":241,"line":257},[239,395,396],{},"\u002F\u002F match[1] = \"2026\", match[2] = \"05\", match[3] = \"12\"\n",[239,398,399],{"class":241,"line":264},[239,400,261],{"emptyLinePlaceholder":260},[239,402,403],{"class":241,"line":270},[239,404,405],{},"\u002F\u002F Named group\n",[239,407,409],{"class":241,"line":408},6,[239,410,411],{},"const match2 = \"2026-05-12\".match(\u002F(?\u003Cyear>\\d{4})-(?\u003Cmonth>\\d{2})-(?\u003Cday>\\d{2})\u002F);\n",[239,413,415],{"class":241,"line":414},7,[239,416,417],{},"\u002F\u002F match2.groups.year = \"2026\"\n",[239,419,421],{"class":241,"line":420},8,[239,422,261],{"emptyLinePlaceholder":260},[239,424,426],{"class":241,"line":425},9,[239,427,428],{},"\u002F\u002F Non-capturing group (just for grouping, no capture)\n",[239,430,432],{"class":241,"line":431},10,[239,433,434],{},"\u002F(?:https?):\\\u002F\\\u002F\u002F\n",[19,436,438],{"id":437},"real-world-patterns","Real-World Patterns",[440,441,443],"h3",{"id":442},"email-validation-simple","Email validation (simple)",[230,445,447],{"className":232,"code":446,"language":234,"meta":235,"style":235},"\u002F[\\w.-]+@[\\w.-]+\\.[a-zA-Z]{2,}\u002F\n",[51,448,449],{"__ignoreMap":235},[239,450,451],{"class":241,"line":242},[239,452,446],{},[440,454,456],{"id":455},"url-extraction","URL extraction",[230,458,460],{"className":232,"code":459,"language":234,"meta":235,"style":235},"\u002Fhttps?:\\\u002F\\\u002F[\\w.-]+(?:\\\u002F[\\w.\u002F-]*)?\u002Fg\n",[51,461,462],{"__ignoreMap":235},[239,463,464],{"class":241,"line":242},[239,465,459],{},[440,467,469],{"id":468},"phone-number","Phone number",[230,471,473],{"className":232,"code":472,"language":234,"meta":235,"style":235},"\u002F\\+?\\d[\\d\\s-]{7,}\\d\u002F\n",[51,474,475],{"__ignoreMap":235},[239,476,477],{"class":241,"line":242},[239,478,472],{},[440,480,482],{"id":481},"hex-color","Hex color",[230,484,486],{"className":232,"code":485,"language":234,"meta":235,"style":235},"\u002F#[0-9a-fA-F]{3,8}\u002F\n",[51,487,488],{"__ignoreMap":235},[239,489,490],{"class":241,"line":242},[239,491,485],{},[440,493,495],{"id":494},"ip-address","IP address",[230,497,499],{"className":232,"code":498,"language":234,"meta":235,"style":235},"\u002F\\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\b\u002F\n",[51,500,501],{"__ignoreMap":235},[239,502,503],{"class":241,"line":242},[239,504,498],{},[440,506,508],{"id":507},"password-strength-8-chars-upper-lower-digit","Password strength (8+ chars, upper, lower, digit)",[230,510,512],{"className":232,"code":511,"language":234,"meta":235,"style":235},"\u002F^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,}$\u002F\n",[51,513,514],{"__ignoreMap":235},[239,515,516],{"class":241,"line":242},[239,517,511],{},[19,519,521],{"id":520},"lookaheads-and-lookbehinds","Lookaheads and Lookbehinds",[230,523,525],{"className":232,"code":524,"language":234,"meta":235,"style":235},"\u002F\u002F Positive lookahead: match \"foo\" only if followed by \"bar\"\n\u002Ffoo(?=bar)\u002F\n\n\u002F\u002F Negative lookahead: match \"foo\" only if NOT followed by \"bar\"\n\u002Ffoo(?!bar)\u002F\n\n\u002F\u002F Positive lookbehind: match \"bar\" only if preceded by \"foo\"\n\u002F(?\u003C=foo)bar\u002F\n\n\u002F\u002F Negative lookbehind: match \"bar\" only if NOT preceded by \"foo\"\n\u002F(?\u003C!foo)bar\u002F\n",[51,526,527,532,537,541,546,551,555,560,565,569,574],{"__ignoreMap":235},[239,528,529],{"class":241,"line":242},[239,530,531],{},"\u002F\u002F Positive lookahead: match \"foo\" only if followed by \"bar\"\n",[239,533,534],{"class":241,"line":248},[239,535,536],{},"\u002Ffoo(?=bar)\u002F\n",[239,538,539],{"class":241,"line":257},[239,540,261],{"emptyLinePlaceholder":260},[239,542,543],{"class":241,"line":264},[239,544,545],{},"\u002F\u002F Negative lookahead: match \"foo\" only if NOT followed by \"bar\"\n",[239,547,548],{"class":241,"line":270},[239,549,550],{},"\u002Ffoo(?!bar)\u002F\n",[239,552,553],{"class":241,"line":408},[239,554,261],{"emptyLinePlaceholder":260},[239,556,557],{"class":241,"line":414},[239,558,559],{},"\u002F\u002F Positive lookbehind: match \"bar\" only if preceded by \"foo\"\n",[239,561,562],{"class":241,"line":420},[239,563,564],{},"\u002F(?\u003C=foo)bar\u002F\n",[239,566,567],{"class":241,"line":425},[239,568,261],{"emptyLinePlaceholder":260},[239,570,571],{"class":241,"line":431},[239,572,573],{},"\u002F\u002F Negative lookbehind: match \"bar\" only if NOT preceded by \"foo\"\n",[239,575,577],{"class":241,"line":576},11,[239,578,579],{},"\u002F(?\u003C!foo)bar\u002F\n",[19,581,583],{"id":582},"javascript-regex-methods","JavaScript Regex Methods",[230,585,587],{"className":232,"code":586,"language":234,"meta":235,"style":235},"\u002F\u002F Test if pattern matches\n\u002F\\d+\u002F.test(\"hello123\");  \u002F\u002F true\n\n\u002F\u002F Find first match\n\"hello123\".match(\u002F\\d+\u002F);  \u002F\u002F [\"123\"]\n\n\u002F\u002F Find all matches\n\"a1b2c3\".matchAll(\u002F\\d\u002Fg);  \u002F\u002F iterator of [\"1\"], [\"2\"], [\"3\"]\n\n\u002F\u002F Replace\n\"hello world\".replace(\u002Fworld\u002F, \"JS\");  \u002F\u002F \"hello JS\"\n\n\u002F\u002F Split\n\"a,b,,c\".split(\u002F,+\u002F);  \u002F\u002F [\"a\", \"b\", \"c\"]\n",[51,588,589,594,599,603,608,616,620,625,633,637,642,650,655,661],{"__ignoreMap":235},[239,590,591],{"class":241,"line":242},[239,592,593],{},"\u002F\u002F Test if pattern matches\n",[239,595,596],{"class":241,"line":248},[239,597,598],{},"\u002F\\d+\u002F.test(\"hello123\");  \u002F\u002F true\n",[239,600,601],{"class":241,"line":257},[239,602,261],{"emptyLinePlaceholder":260},[239,604,605],{"class":241,"line":264},[239,606,607],{},"\u002F\u002F Find first match\n",[239,609,610,613],{"class":241,"line":270},[239,611,612],{},"\"hello123\".match(\u002F\\d+\u002F);",[239,614,615],{},"  \u002F\u002F [\"123\"]\n",[239,617,618],{"class":241,"line":408},[239,619,261],{"emptyLinePlaceholder":260},[239,621,622],{"class":241,"line":414},[239,623,624],{},"\u002F\u002F Find all matches\n",[239,626,627,630],{"class":241,"line":420},[239,628,629],{},"\"a1b2c3\".matchAll(\u002F\\d\u002Fg);",[239,631,632],{},"  \u002F\u002F iterator of [\"1\"], [\"2\"], [\"3\"]\n",[239,634,635],{"class":241,"line":425},[239,636,261],{"emptyLinePlaceholder":260},[239,638,639],{"class":241,"line":431},[239,640,641],{},"\u002F\u002F Replace\n",[239,643,644,647],{"class":241,"line":576},[239,645,646],{},"\"hello world\".replace(\u002Fworld\u002F, \"JS\");",[239,648,649],{},"  \u002F\u002F \"hello JS\"\n",[239,651,653],{"class":241,"line":652},12,[239,654,261],{"emptyLinePlaceholder":260},[239,656,658],{"class":241,"line":657},13,[239,659,660],{},"\u002F\u002F Split\n",[239,662,664,667],{"class":241,"line":663},14,[239,665,666],{},"\"a,b,,c\".split(\u002F,+\u002F);",[239,668,669],{},"  \u002F\u002F [\"a\", \"b\", \"c\"]\n",[19,671,673],{"id":672},"common-mistakes","Common Mistakes",[675,676,677,691,701,711],"ol",{},[678,679,680,683,684,686,687,690],"li",{},[222,681,682],{},"Not escaping special characters",": ",[51,685,53],{}," matches ANY character. Use ",[51,688,689],{},"\\."," for a literal dot.",[678,692,693,700],{},[222,694,695,696,699],{},"Forgetting the ",[51,697,698],{},"g"," flag",": Without it, only the first match is returned.",[678,702,703,706,707,710],{},[222,704,705],{},"Catastrophic backtracking",": Nested quantifiers like ",[51,708,709],{},"(a+)+"," can cause exponential processing time.",[678,712,713,716],{},[222,714,715],{},"Over-engineering email validation",": Use a simple pattern + send a verification email instead.",[19,718,720],{"id":719},"practice","Practice",[15,722,723,724,729],{},"Test all these patterns live on our ",[725,726,728],"a",{"href":727},"\u002Fregex-tester","Regex Tester",". It highlights matches in real-time and shows capture groups — perfect for learning and debugging.",[731,732,733],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":235,"searchDepth":248,"depth":248,"links":735},[736,737,738,739,740,741,749,750,751,752],{"id":21,"depth":248,"text":22},{"id":144,"depth":248,"text":145},{"id":279,"depth":248,"text":280},{"id":346,"depth":248,"text":347},{"id":375,"depth":248,"text":376},{"id":437,"depth":248,"text":438,"children":742},[743,744,745,746,747,748],{"id":442,"depth":257,"text":443},{"id":455,"depth":257,"text":456},{"id":468,"depth":257,"text":469},{"id":481,"depth":257,"text":482},{"id":494,"depth":257,"text":495},{"id":507,"depth":257,"text":508},{"id":520,"depth":248,"text":521},{"id":582,"depth":248,"text":583},{"id":672,"depth":248,"text":673},{"id":719,"depth":248,"text":720},"2026-05-12","A practical regex reference covering patterns, quantifiers, groups, lookaheads, and real-world examples. Bookmark this one.","md",{},"\u002Fblog\u002Fregex-cheat-sheet-for-developers","regex-tester",{"title":5,"description":754},"blog\u002Fregex-cheat-sheet-for-developers",[762,234],"guide","7KPh7MNLAvuSWYeDkRjys_6c6VrsQaLfhU5txrCPnH8",[765,1028,1494,2047,2317],{"id":766,"title":767,"author":6,"body":768,"date":1017,"description":1018,"extension":755,"meta":1019,"navigation":260,"path":1020,"readingTime":270,"relatedTool":1021,"seo":1022,"stem":1023,"tags":1024,"__hash__":1027},"blog\u002Fblog\u002Fwhat-is-base64-encoding.md","What is Base64 Encoding and When Should You Use It?",{"type":8,"value":769,"toc":1003},[770,773,776,780,787,790,797,804,808,819,825,831,835,839,842,872,876,879,885,896,900,903,907,910,914,921,936,940,947,951,961,985,988,992,1000],[11,771,767],{"id":772},"what-is-base64-encoding-and-when-should-you-use-it",[15,774,775],{},"If you've worked with APIs, emails, or embedded images, you've likely encountered Base64. But what exactly is it, and why do we need it?",[19,777,779],{"id":778},"the-problem-base64-solves","The Problem Base64 Solves",[15,781,782,783,786],{},"Many systems — email protocols, URLs, JSON — are designed to handle ",[222,784,785],{},"text",", not binary data. When you need to transmit binary data (like an image, a file, or encrypted bytes) through these text-based channels, things break.",[15,788,789],{},"Base64 solves this by converting binary data into a safe set of 64 ASCII characters:",[230,791,795],{"className":792,"code":794,"language":785},[793],"language-text","A-Z, a-z, 0-9, +, \u002F\n",[51,796,794],{"__ignoreMap":235},[15,798,799,800,803],{},"Plus ",[51,801,802],{},"="," for padding.",[19,805,807],{"id":806},"how-it-works","How It Works",[15,809,810,811,814,815,818],{},"Base64 takes every ",[222,812,813],{},"3 bytes"," (24 bits) of input and splits them into ",[222,816,817],{},"4 groups of 6 bits",". Each 6-bit group maps to one of the 64 characters.",[230,820,823],{"className":821,"code":822,"language":785},[793],"Input:   \"Hi\"\nBinary:  01001000 01101001\nBase64:  SGk=\n",[51,824,822],{"__ignoreMap":235},[15,826,827,828,830],{},"Since \"Hi\" is only 2 bytes (not divisible by 3), padding (",[51,829,802],{},") is added.",[19,832,834],{"id":833},"common-use-cases","Common Use Cases",[440,836,838],{"id":837},"_1-data-uris-in-htmlcss","1. Data URIs in HTML\u002FCSS",[15,840,841],{},"Embed small images directly in your HTML without extra HTTP requests:",[230,843,847],{"className":844,"code":845,"language":846,"meta":235,"style":235},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\" \u002F>\n","html",[51,848,849],{"__ignoreMap":235},[239,850,851,855,859,863,865,869],{"class":241,"line":242},[239,852,854],{"class":853},"sVt8B","\u003C",[239,856,858],{"class":857},"s9eBZ","img",[239,860,862],{"class":861},"sScJk"," src",[239,864,802],{"class":853},[239,866,868],{"class":867},"sZZnC","\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\"",[239,870,871],{"class":853}," \u002F>\n",[440,873,875],{"id":874},"_2-api-authentication","2. API Authentication",[15,877,878],{},"HTTP Basic Auth sends credentials as Base64:",[230,880,883],{"className":881,"code":882,"language":785},[793],"Authorization: Basic dXNlcjpwYXNzd29yZA==\n",[51,884,882],{"__ignoreMap":235},[15,886,887,888,891,892,895],{},"(This is ",[51,889,890],{},"user:password"," encoded — ",[222,893,894],{},"not encrypted!",")",[440,897,899],{"id":898},"_3-jwt-tokens","3. JWT Tokens",[15,901,902],{},"JSON Web Tokens use Base64URL encoding for the header and payload sections.",[440,904,906],{"id":905},"_4-email-attachments","4. Email Attachments",[15,908,909],{},"MIME encoding uses Base64 to attach binary files to emails.",[19,911,913],{"id":912},"important-base64-is-not-encryption","Important: Base64 is NOT Encryption",[15,915,916,917,920],{},"A common misconception — Base64 is ",[222,918,919],{},"encoding",", not encryption. Anyone can decode it. Never use it to \"hide\" sensitive data.",[230,922,924],{"className":232,"code":923,"language":234,"meta":235,"style":235},"\u002F\u002F Anyone can decode this\natob('cGFzc3dvcmQxMjM=') \u002F\u002F \"password123\"\n",[51,925,926,931],{"__ignoreMap":235},[239,927,928],{"class":241,"line":242},[239,929,930],{},"\u002F\u002F Anyone can decode this\n",[239,932,933],{"class":241,"line":248},[239,934,935],{},"atob('cGFzc3dvcmQxMjM=') \u002F\u002F \"password123\"\n",[19,937,939],{"id":938},"the-size-overhead","The Size Overhead",[15,941,942,943,946],{},"Base64 increases data size by approximately ",[222,944,945],{},"33%",". Every 3 bytes become 4 characters. Keep this in mind when embedding large files.",[19,948,950],{"id":949},"url-safe-base64","URL-Safe Base64",[15,952,953,954,956,957,960],{},"Standard Base64 uses ",[51,955,175],{}," and ",[51,958,959],{},"\u002F",", which have special meaning in URLs. URL-safe Base64 replaces them:",[962,963,964,972,979],"ul",{},[678,965,966,968,969],{},[51,967,175],{}," → ",[51,970,971],{},"-",[678,973,974,968,976],{},[51,975,959],{},[51,977,978],{},"_",[678,980,981,982,984],{},"Padding ",[51,983,802],{}," is removed",[15,986,987],{},"This variant is used in JWTs and URL parameters.",[19,989,991],{"id":990},"try-it-yourself","Try It Yourself",[15,993,994,995,999],{},"Use our ",[725,996,998],{"href":997},"\u002Fbase64-encode-decode","Base64 Encode\u002FDecode tool"," to experiment with encoding and decoding text. It supports both standard and URL-safe modes, all running in your browser.",[731,1001,1002],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":235,"searchDepth":248,"depth":248,"links":1004},[1005,1006,1007,1013,1014,1015,1016],{"id":778,"depth":248,"text":779},{"id":806,"depth":248,"text":807},{"id":833,"depth":248,"text":834,"children":1008},[1009,1010,1011,1012],{"id":837,"depth":257,"text":838},{"id":874,"depth":257,"text":875},{"id":898,"depth":257,"text":899},{"id":905,"depth":257,"text":906},{"id":912,"depth":248,"text":913},{"id":938,"depth":248,"text":939},{"id":949,"depth":248,"text":950},{"id":990,"depth":248,"text":991},"2026-05-15","Learn what Base64 encoding is, how it works under the hood, and practical use cases for web developers. Includes examples and common pitfalls.",{},"\u002Fblog\u002Fwhat-is-base64-encoding","base64-encode-decode",{"title":767,"description":1018},"blog\u002Fwhat-is-base64-encoding",[1025,1026],"tutorial","tools","UF5GOTWepFy5gUcCE821yFutjU0xOxP-9OniI04B0b4",{"id":1029,"title":1030,"author":6,"body":1031,"date":1484,"description":1485,"extension":755,"meta":1486,"navigation":260,"path":1487,"readingTime":414,"relatedTool":1488,"seo":1489,"stem":1490,"tags":1491,"__hash__":1493},"blog\u002Fblog\u002Funderstanding-jwt-tokens.md","Understanding JWT Tokens: A Developer's Complete Guide",{"type":8,"value":1032,"toc":1465},[1033,1036,1039,1043,1046,1052,1065,1069,1073,1076,1117,1120,1124,1131,1202,1207,1251,1255,1258,1264,1268,1274,1278,1282,1285,1305,1309,1312,1316,1319,1326,1332,1336,1408,1412,1420,1434,1437,1441,1462],[11,1034,1030],{"id":1035},"understanding-jwt-tokens-a-developers-complete-guide",[15,1037,1038],{},"JWTs are everywhere — authentication, API authorization, single sign-on. Yet most developers use them without truly understanding how they work. Let's fix that.",[19,1040,1042],{"id":1041},"what-is-a-jwt","What is a JWT?",[15,1044,1045],{},"A JSON Web Token (JWT) is a compact, URL-safe string that represents claims between two parties. It's pronounced \"jot\" and looks like this:",[230,1047,1050],{"className":1048,"code":1049,"language":785},[793],"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0In0.signature\n",[51,1051,1049],{"__ignoreMap":235},[15,1053,1054,1055,1058,1059,1058,1062,53],{},"Three parts separated by dots: ",[222,1056,1057],{},"Header",", ",[222,1060,1061],{},"Payload",[222,1063,1064],{},"Signature",[19,1066,1068],{"id":1067},"the-three-parts","The Three Parts",[440,1070,1072],{"id":1071},"_1-header","1. Header",[15,1074,1075],{},"The header specifies the token type and signing algorithm:",[230,1077,1081],{"className":1078,"code":1079,"language":1080,"meta":235,"style":235},"language-json shiki shiki-themes github-light github-dark","{\n  \"alg\": \"HS256\",\n  \"typ\": \"JWT\"\n}\n","json",[51,1082,1083,1088,1102,1112],{"__ignoreMap":235},[239,1084,1085],{"class":241,"line":242},[239,1086,1087],{"class":853},"{\n",[239,1089,1090,1094,1096,1099],{"class":241,"line":248},[239,1091,1093],{"class":1092},"sj4cs","  \"alg\"",[239,1095,683],{"class":853},[239,1097,1098],{"class":867},"\"HS256\"",[239,1100,1101],{"class":853},",\n",[239,1103,1104,1107,1109],{"class":241,"line":257},[239,1105,1106],{"class":1092},"  \"typ\"",[239,1108,683],{"class":853},[239,1110,1111],{"class":867},"\"JWT\"\n",[239,1113,1114],{"class":241,"line":264},[239,1115,1116],{"class":853},"}\n",[15,1118,1119],{},"This is Base64URL-encoded to form the first part of the token.",[440,1121,1123],{"id":1122},"_2-payload","2. Payload",[15,1125,1126,1127,1130],{},"The payload contains ",[222,1128,1129],{},"claims"," — statements about the user and metadata:",[230,1132,1134],{"className":1078,"code":1133,"language":1080,"meta":235,"style":235},"{\n  \"sub\": \"1234567890\",\n  \"name\": \"Jane Doe\",\n  \"iat\": 1716239022,\n  \"exp\": 1716242622,\n  \"role\": \"admin\"\n}\n",[51,1135,1136,1140,1152,1164,1176,1188,1198],{"__ignoreMap":235},[239,1137,1138],{"class":241,"line":242},[239,1139,1087],{"class":853},[239,1141,1142,1145,1147,1150],{"class":241,"line":248},[239,1143,1144],{"class":1092},"  \"sub\"",[239,1146,683],{"class":853},[239,1148,1149],{"class":867},"\"1234567890\"",[239,1151,1101],{"class":853},[239,1153,1154,1157,1159,1162],{"class":241,"line":257},[239,1155,1156],{"class":1092},"  \"name\"",[239,1158,683],{"class":853},[239,1160,1161],{"class":867},"\"Jane Doe\"",[239,1163,1101],{"class":853},[239,1165,1166,1169,1171,1174],{"class":241,"line":264},[239,1167,1168],{"class":1092},"  \"iat\"",[239,1170,683],{"class":853},[239,1172,1173],{"class":1092},"1716239022",[239,1175,1101],{"class":853},[239,1177,1178,1181,1183,1186],{"class":241,"line":270},[239,1179,1180],{"class":1092},"  \"exp\"",[239,1182,683],{"class":853},[239,1184,1185],{"class":1092},"1716242622",[239,1187,1101],{"class":853},[239,1189,1190,1193,1195],{"class":241,"line":408},[239,1191,1192],{"class":1092},"  \"role\"",[239,1194,683],{"class":853},[239,1196,1197],{"class":867},"\"admin\"\n",[239,1199,1200],{"class":241,"line":414},[239,1201,1116],{"class":853},[15,1203,1204],{},[222,1205,1206],{},"Standard claims:",[962,1208,1209,1215,1221,1227,1233,1239,1245],{},[678,1210,1211,1214],{},[51,1212,1213],{},"iss"," — Issuer (who created the token)",[678,1216,1217,1220],{},[51,1218,1219],{},"sub"," — Subject (who the token is about)",[678,1222,1223,1226],{},[51,1224,1225],{},"aud"," — Audience (who the token is for)",[678,1228,1229,1232],{},[51,1230,1231],{},"exp"," — Expiration time",[678,1234,1235,1238],{},[51,1236,1237],{},"iat"," — Issued at",[678,1240,1241,1244],{},[51,1242,1243],{},"nbf"," — Not valid before",[678,1246,1247,1250],{},[51,1248,1249],{},"jti"," — Unique token ID",[440,1252,1254],{"id":1253},"_3-signature","3. Signature",[15,1256,1257],{},"The signature ensures the token hasn't been tampered with:",[230,1259,1262],{"className":1260,"code":1261,"language":785},[793],"HMACSHA256(\n  base64UrlEncode(header) + \".\" + base64UrlEncode(payload),\n  secret\n)\n",[51,1263,1261],{"__ignoreMap":235},[19,1265,1267],{"id":1266},"how-authentication-works-with-jwt","How Authentication Works with JWT",[230,1269,1272],{"className":1270,"code":1271,"language":785},[793],"1. User logs in with email\u002Fpassword\n2. Server verifies credentials\n3. Server creates a JWT with user info + signs it\n4. Server sends JWT to client\n5. Client stores JWT (localStorage, cookie, memory)\n6. Client sends JWT in Authorization header on each request\n7. Server verifies signature + checks expiration\n8. Server processes the request\n",[51,1273,1271],{"__ignoreMap":235},[19,1275,1277],{"id":1276},"common-security-mistakes","Common Security Mistakes",[440,1279,1281],{"id":1280},"never-store-secrets-in-the-payload","Never store secrets in the payload",[15,1283,1284],{},"The payload is just Base64-encoded — anyone can decode it:",[230,1286,1288],{"className":232,"code":1287,"language":234,"meta":235,"style":235},"\u002F\u002F This is NOT encryption\natob('eyJwYXNzd29yZCI6InNlY3JldCJ9')\n\u002F\u002F '{\"password\":\"secret\"}'\n",[51,1289,1290,1295,1300],{"__ignoreMap":235},[239,1291,1292],{"class":241,"line":242},[239,1293,1294],{},"\u002F\u002F This is NOT encryption\n",[239,1296,1297],{"class":241,"line":248},[239,1298,1299],{},"atob('eyJwYXNzd29yZCI6InNlY3JldCJ9')\n",[239,1301,1302],{"class":241,"line":257},[239,1303,1304],{},"\u002F\u002F '{\"password\":\"secret\"}'\n",[440,1306,1308],{"id":1307},"always-validate-the-signature-server-side","Always validate the signature server-side",[15,1310,1311],{},"Never trust a JWT without verifying its signature. The whole point of the signature is proving the token was issued by your server.",[440,1313,1315],{"id":1314},"set-short-expiration-times","Set short expiration times",[15,1317,1318],{},"JWTs can't be revoked once issued (unlike session tokens). Keep expiration times short (15 minutes to 1 hour) and use refresh tokens for longer sessions.",[440,1320,1322,1323],{"id":1321},"dont-use-alg-none","Don't use ",[51,1324,1325],{},"alg: \"none\"",[15,1327,1328,1329,1331],{},"Some JWT libraries accept ",[51,1330,1325],{}," which means no signature verification. Always reject tokens with no algorithm.",[19,1333,1335],{"id":1334},"jwt-vs-session-tokens","JWT vs Session Tokens",[24,1337,1338,1351],{},[27,1339,1340],{},[30,1341,1342,1345,1348],{},[33,1343,1344],{},"Feature",[33,1346,1347],{},"JWT",[33,1349,1350],{},"Session Token",[43,1352,1353,1364,1375,1386,1397],{},[30,1354,1355,1358,1361],{},[48,1356,1357],{},"Storage",[48,1359,1360],{},"Client-side",[48,1362,1363],{},"Server-side",[30,1365,1366,1369,1372],{},[48,1367,1368],{},"Scalability",[48,1370,1371],{},"No server state",[48,1373,1374],{},"Requires session store",[30,1376,1377,1380,1383],{},[48,1378,1379],{},"Revocation",[48,1381,1382],{},"Hard (can't invalidate)",[48,1384,1385],{},"Easy (delete from store)",[30,1387,1388,1391,1394],{},[48,1389,1390],{},"Size",[48,1392,1393],{},"Larger (contains claims)",[48,1395,1396],{},"Small (just an ID)",[30,1398,1399,1402,1405],{},[48,1400,1401],{},"Best for",[48,1403,1404],{},"Microservices, APIs",[48,1406,1407],{},"Traditional web apps",[19,1409,1411],{"id":1410},"debugging-jwts","Debugging JWTs",[15,1413,1414,1415,1419],{},"When a JWT isn't working, you need to inspect its contents. Use our ",[725,1416,1418],{"href":1417},"\u002Fjwt-decoder","JWT Decoder"," to:",[962,1421,1422,1425,1428,1431],{},[678,1423,1424],{},"See the header algorithm",[678,1426,1427],{},"Read all payload claims",[678,1429,1430],{},"Check if the token is expired",[678,1432,1433],{},"View the issued\u002Fexpiration timeline",[15,1435,1436],{},"All decoding happens in your browser — your tokens never leave your device.",[19,1438,1440],{"id":1439},"key-takeaways","Key Takeaways",[675,1442,1443,1450,1453,1456,1459],{},[678,1444,1445,1446,1449],{},"JWTs are ",[222,1447,1448],{},"signed",", not encrypted — anyone can read the payload",[678,1451,1452],{},"The signature prevents tampering, not reading",[678,1454,1455],{},"Keep expiration times short",[678,1457,1458],{},"Store tokens securely (httpOnly cookies > localStorage)",[678,1460,1461],{},"Always verify signatures server-side",[731,1463,1464],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":235,"searchDepth":248,"depth":248,"links":1466},[1467,1468,1473,1474,1481,1482,1483],{"id":1041,"depth":248,"text":1042},{"id":1067,"depth":248,"text":1068,"children":1469},[1470,1471,1472],{"id":1071,"depth":257,"text":1072},{"id":1122,"depth":257,"text":1123},{"id":1253,"depth":257,"text":1254},{"id":1266,"depth":248,"text":1267},{"id":1276,"depth":248,"text":1277,"children":1475},[1476,1477,1478,1479],{"id":1280,"depth":257,"text":1281},{"id":1307,"depth":257,"text":1308},{"id":1314,"depth":257,"text":1315},{"id":1321,"depth":257,"text":1480},"Don't use alg: \"none\"",{"id":1334,"depth":248,"text":1335},{"id":1410,"depth":248,"text":1411},{"id":1439,"depth":248,"text":1440},"2026-05-14","Everything you need to know about JSON Web Tokens — how they work, when to use them, security pitfalls to avoid, and how to debug them.",{},"\u002Fblog\u002Funderstanding-jwt-tokens","jwt-decoder",{"title":1030,"description":1485},"blog\u002Funderstanding-jwt-tokens",[1025,1492],"security","AdUkIm9zKPkAkRiwSwgn4LLTIoYbhhxAwdKK6Uo83Hw",{"id":4,"title":5,"author":6,"body":1495,"date":753,"description":754,"extension":755,"meta":2044,"navigation":260,"path":757,"readingTime":420,"relatedTool":758,"seo":2045,"stem":760,"tags":2046,"__hash__":763},{"type":8,"value":1496,"toc":2025},[1497,1499,1501,1503,1589,1591,1651,1657,1685,1687,1727,1739,1741,1761,1763,1807,1809,1811,1819,1821,1829,1831,1839,1841,1849,1851,1859,1861,1869,1871,1919,1921,1989,1991,2017,2019,2023],[11,1498,5],{"id":13},[15,1500,17],{},[19,1502,22],{"id":21},[24,1504,1505,1515],{},[27,1506,1507],{},[30,1508,1509,1511,1513],{},[33,1510,35],{},[33,1512,38],{},[33,1514,41],{},[43,1516,1517,1529,1541,1553,1565,1577],{},[30,1518,1519,1523,1525],{},[48,1520,1521],{},[51,1522,53],{},[48,1524,56],{},[48,1526,1527,62],{},[51,1528,61],{},[30,1530,1531,1535,1537],{},[48,1532,1533],{},[51,1534,69],{},[48,1536,72],{},[48,1538,1539,78],{},[51,1540,77],{},[30,1542,1543,1547,1549],{},[48,1544,1545],{},[51,1546,85],{},[48,1548,88],{},[48,1550,1551,94],{},[51,1552,93],{},[30,1554,1555,1559,1561],{},[48,1556,1557],{},[51,1558,101],{},[48,1560,104],{},[48,1562,1563,110],{},[51,1564,109],{},[30,1566,1567,1571,1573],{},[48,1568,1569],{},[51,1570,117],{},[48,1572,120],{},[48,1574,1575,126],{},[51,1576,125],{},[30,1578,1579,1583,1585],{},[48,1580,1581],{},[51,1582,133],{},[48,1584,136],{},[48,1586,1587,141],{},[51,1588,133],{},[19,1590,145],{"id":144},[24,1592,1593,1601],{},[27,1594,1595],{},[30,1596,1597,1599],{},[33,1598,35],{},[33,1600,156],{},[43,1602,1603,1611,1619,1627,1635,1643],{},[30,1604,1605,1609],{},[48,1606,1607],{},[51,1608,165],{},[48,1610,168],{},[30,1612,1613,1617],{},[48,1614,1615],{},[51,1616,175],{},[48,1618,178],{},[30,1620,1621,1625],{},[48,1622,1623],{},[51,1624,185],{},[48,1626,188],{},[30,1628,1629,1633],{},[48,1630,1631],{},[51,1632,195],{},[48,1634,198],{},[30,1636,1637,1641],{},[48,1638,1639],{},[51,1640,205],{},[48,1642,208],{},[30,1644,1645,1649],{},[48,1646,1647],{},[51,1648,215],{},[48,1650,218],{},[15,1652,1653,225,1655,228],{},[222,1654,224],{},[51,1656,185],{},[230,1658,1659],{"className":232,"code":233,"language":234,"meta":235,"style":235},[51,1660,1661,1665,1671,1675,1679],{"__ignoreMap":235},[239,1662,1663],{"class":241,"line":242},[239,1664,245],{},[239,1666,1667,1669],{"class":241,"line":248},[239,1668,251],{},[239,1670,254],{},[239,1672,1673],{"class":241,"line":257},[239,1674,261],{"emptyLinePlaceholder":260},[239,1676,1677],{"class":241,"line":264},[239,1678,267],{},[239,1680,1681,1683],{"class":241,"line":270},[239,1682,273],{},[239,1684,276],{},[19,1686,280],{"id":279},[24,1688,1689,1697],{},[27,1690,1691],{},[30,1692,1693,1695],{},[33,1694,35],{},[33,1696,156],{},[43,1698,1699,1709,1719],{},[30,1700,1701,1705],{},[48,1702,1703],{},[51,1704,299],{},[48,1706,302,1707,306],{},[51,1708,305],{},[30,1710,1711,1715],{},[48,1712,1713],{},[51,1714,313],{},[48,1716,316,1717,306],{},[51,1718,305],{},[30,1720,1721,1725],{},[48,1722,1723],{},[51,1724,325],{},[48,1726,328],{},[230,1728,1729],{"className":232,"code":331,"language":234,"meta":235,"style":235},[51,1730,1731,1735],{"__ignoreMap":235},[239,1732,1733],{"class":241,"line":242},[239,1734,338],{},[239,1736,1737],{"class":241,"line":248},[239,1738,343],{},[19,1740,347],{"id":346},[230,1742,1743],{"className":232,"code":350,"language":234,"meta":235,"style":235},[51,1744,1745,1749,1753,1757],{"__ignoreMap":235},[239,1746,1747],{"class":241,"line":242},[239,1748,357],{},[239,1750,1751],{"class":241,"line":248},[239,1752,362],{},[239,1754,1755],{"class":241,"line":257},[239,1756,367],{},[239,1758,1759],{"class":241,"line":264},[239,1760,372],{},[19,1762,376],{"id":375},[230,1764,1765],{"className":232,"code":379,"language":234,"meta":235,"style":235},[51,1766,1767,1771,1775,1779,1783,1787,1791,1795,1799,1803],{"__ignoreMap":235},[239,1768,1769],{"class":241,"line":242},[239,1770,386],{},[239,1772,1773],{"class":241,"line":248},[239,1774,391],{},[239,1776,1777],{"class":241,"line":257},[239,1778,396],{},[239,1780,1781],{"class":241,"line":264},[239,1782,261],{"emptyLinePlaceholder":260},[239,1784,1785],{"class":241,"line":270},[239,1786,405],{},[239,1788,1789],{"class":241,"line":408},[239,1790,411],{},[239,1792,1793],{"class":241,"line":414},[239,1794,417],{},[239,1796,1797],{"class":241,"line":420},[239,1798,261],{"emptyLinePlaceholder":260},[239,1800,1801],{"class":241,"line":425},[239,1802,428],{},[239,1804,1805],{"class":241,"line":431},[239,1806,434],{},[19,1808,438],{"id":437},[440,1810,443],{"id":442},[230,1812,1813],{"className":232,"code":446,"language":234,"meta":235,"style":235},[51,1814,1815],{"__ignoreMap":235},[239,1816,1817],{"class":241,"line":242},[239,1818,446],{},[440,1820,456],{"id":455},[230,1822,1823],{"className":232,"code":459,"language":234,"meta":235,"style":235},[51,1824,1825],{"__ignoreMap":235},[239,1826,1827],{"class":241,"line":242},[239,1828,459],{},[440,1830,469],{"id":468},[230,1832,1833],{"className":232,"code":472,"language":234,"meta":235,"style":235},[51,1834,1835],{"__ignoreMap":235},[239,1836,1837],{"class":241,"line":242},[239,1838,472],{},[440,1840,482],{"id":481},[230,1842,1843],{"className":232,"code":485,"language":234,"meta":235,"style":235},[51,1844,1845],{"__ignoreMap":235},[239,1846,1847],{"class":241,"line":242},[239,1848,485],{},[440,1850,495],{"id":494},[230,1852,1853],{"className":232,"code":498,"language":234,"meta":235,"style":235},[51,1854,1855],{"__ignoreMap":235},[239,1856,1857],{"class":241,"line":242},[239,1858,498],{},[440,1860,508],{"id":507},[230,1862,1863],{"className":232,"code":511,"language":234,"meta":235,"style":235},[51,1864,1865],{"__ignoreMap":235},[239,1866,1867],{"class":241,"line":242},[239,1868,511],{},[19,1870,521],{"id":520},[230,1872,1873],{"className":232,"code":524,"language":234,"meta":235,"style":235},[51,1874,1875,1879,1883,1887,1891,1895,1899,1903,1907,1911,1915],{"__ignoreMap":235},[239,1876,1877],{"class":241,"line":242},[239,1878,531],{},[239,1880,1881],{"class":241,"line":248},[239,1882,536],{},[239,1884,1885],{"class":241,"line":257},[239,1886,261],{"emptyLinePlaceholder":260},[239,1888,1889],{"class":241,"line":264},[239,1890,545],{},[239,1892,1893],{"class":241,"line":270},[239,1894,550],{},[239,1896,1897],{"class":241,"line":408},[239,1898,261],{"emptyLinePlaceholder":260},[239,1900,1901],{"class":241,"line":414},[239,1902,559],{},[239,1904,1905],{"class":241,"line":420},[239,1906,564],{},[239,1908,1909],{"class":241,"line":425},[239,1910,261],{"emptyLinePlaceholder":260},[239,1912,1913],{"class":241,"line":431},[239,1914,573],{},[239,1916,1917],{"class":241,"line":576},[239,1918,579],{},[19,1920,583],{"id":582},[230,1922,1923],{"className":232,"code":586,"language":234,"meta":235,"style":235},[51,1924,1925,1929,1933,1937,1941,1947,1951,1955,1961,1965,1969,1975,1979,1983],{"__ignoreMap":235},[239,1926,1927],{"class":241,"line":242},[239,1928,593],{},[239,1930,1931],{"class":241,"line":248},[239,1932,598],{},[239,1934,1935],{"class":241,"line":257},[239,1936,261],{"emptyLinePlaceholder":260},[239,1938,1939],{"class":241,"line":264},[239,1940,607],{},[239,1942,1943,1945],{"class":241,"line":270},[239,1944,612],{},[239,1946,615],{},[239,1948,1949],{"class":241,"line":408},[239,1950,261],{"emptyLinePlaceholder":260},[239,1952,1953],{"class":241,"line":414},[239,1954,624],{},[239,1956,1957,1959],{"class":241,"line":420},[239,1958,629],{},[239,1960,632],{},[239,1962,1963],{"class":241,"line":425},[239,1964,261],{"emptyLinePlaceholder":260},[239,1966,1967],{"class":241,"line":431},[239,1968,641],{},[239,1970,1971,1973],{"class":241,"line":576},[239,1972,646],{},[239,1974,649],{},[239,1976,1977],{"class":241,"line":652},[239,1978,261],{"emptyLinePlaceholder":260},[239,1980,1981],{"class":241,"line":657},[239,1982,660],{},[239,1984,1985,1987],{"class":241,"line":663},[239,1986,666],{},[239,1988,669],{},[19,1990,673],{"id":672},[675,1992,1993,2001,2007,2013],{},[678,1994,1995,683,1997,686,1999,690],{},[222,1996,682],{},[51,1998,53],{},[51,2000,689],{},[678,2002,2003,700],{},[222,2004,695,2005,699],{},[51,2006,698],{},[678,2008,2009,706,2011,710],{},[222,2010,705],{},[51,2012,709],{},[678,2014,2015,716],{},[222,2016,715],{},[19,2018,720],{"id":719},[15,2020,723,2021,729],{},[725,2022,728],{"href":727},[731,2024,733],{},{"title":235,"searchDepth":248,"depth":248,"links":2026},[2027,2028,2029,2030,2031,2032,2040,2041,2042,2043],{"id":21,"depth":248,"text":22},{"id":144,"depth":248,"text":145},{"id":279,"depth":248,"text":280},{"id":346,"depth":248,"text":347},{"id":375,"depth":248,"text":376},{"id":437,"depth":248,"text":438,"children":2033},[2034,2035,2036,2037,2038,2039],{"id":442,"depth":257,"text":443},{"id":455,"depth":257,"text":456},{"id":468,"depth":257,"text":469},{"id":481,"depth":257,"text":482},{"id":494,"depth":257,"text":495},{"id":507,"depth":257,"text":508},{"id":520,"depth":248,"text":521},{"id":582,"depth":248,"text":583},{"id":672,"depth":248,"text":673},{"id":719,"depth":248,"text":720},{},{"title":5,"description":754},[762,234],{"id":2048,"title":2049,"author":6,"body":2050,"date":2307,"description":2308,"extension":755,"meta":2309,"navigation":260,"path":2310,"readingTime":264,"relatedTool":2311,"seo":2312,"stem":2313,"tags":2314,"__hash__":2316},"blog\u002Fblog\u002F10-javascript-one-liners-you-should-know.md","10 JavaScript One-Liners Every Developer Should Know",{"type":8,"value":2051,"toc":2295},[2052,2055,2058,2062,2071,2074,2078,2093,2096,2100,2109,2112,2116,2125,2128,2132,2141,2145,2160,2164,2189,2193,2212,2215,2219,2228,2235,2239,2248,2254,2279,2282,2285,2293],[11,2053,2049],{"id":2054},"_10-javascript-one-liners-every-developer-should-know",[15,2056,2057],{},"These aren't just clever tricks — they're practical patterns you'll reach for daily.",[19,2059,2061],{"id":2060},"_1-remove-duplicates-from-an-array","1. Remove Duplicates from an Array",[230,2063,2065],{"className":232,"code":2064,"language":234,"meta":235,"style":235},"const unique = [...new Set(array)];\n",[51,2066,2067],{"__ignoreMap":235},[239,2068,2069],{"class":241,"line":242},[239,2070,2064],{},[15,2072,2073],{},"Works with primitives (strings, numbers). For objects, you'll need a different approach.",[19,2075,2077],{"id":2076},"_2-generate-a-random-uuid","2. Generate a Random UUID",[230,2079,2081],{"className":232,"code":2080,"language":234,"meta":235,"style":235},"const uuid = crypto.randomUUID();\n\u002F\u002F \"3b241101-e2bb-4d52-8f4a-6e9d2ed35c21\"\n",[51,2082,2083,2088],{"__ignoreMap":235},[239,2084,2085],{"class":241,"line":242},[239,2086,2087],{},"const uuid = crypto.randomUUID();\n",[239,2089,2090],{"class":241,"line":248},[239,2091,2092],{},"\u002F\u002F \"3b241101-e2bb-4d52-8f4a-6e9d2ed35c21\"\n",[15,2094,2095],{},"Built into all modern browsers — no library needed.",[19,2097,2099],{"id":2098},"_3-copy-text-to-clipboard","3. Copy Text to Clipboard",[230,2101,2103],{"className":232,"code":2102,"language":234,"meta":235,"style":235},"await navigator.clipboard.writeText(\"Hello, clipboard!\");\n",[51,2104,2105],{"__ignoreMap":235},[239,2106,2107],{"class":241,"line":242},[239,2108,2102],{},[15,2110,2111],{},"Requires user interaction (click\u002Fkeypress) and HTTPS.",[19,2113,2115],{"id":2114},"_4-shuffle-an-array","4. Shuffle an Array",[230,2117,2119],{"className":232,"code":2118,"language":234,"meta":235,"style":235},"const shuffled = array.sort(() => Math.random() - 0.5);\n",[51,2120,2121],{"__ignoreMap":235},[239,2122,2123],{"class":241,"line":242},[239,2124,2118],{},[15,2126,2127],{},"Good enough for most cases. For truly unbiased shuffling, use Fisher-Yates.",[19,2129,2131],{"id":2130},"_5-get-a-random-element","5. Get a Random Element",[230,2133,2135],{"className":232,"code":2134,"language":234,"meta":235,"style":235},"const random = array[Math.floor(Math.random() * array.length)];\n",[51,2136,2137],{"__ignoreMap":235},[239,2138,2139],{"class":241,"line":242},[239,2140,2134],{},[19,2142,2144],{"id":2143},"_6-flatten-a-nested-array","6. Flatten a Nested Array",[230,2146,2148],{"className":232,"code":2147,"language":234,"meta":235,"style":235},"const flat = array.flat(Infinity);\n\u002F\u002F [1, [2, [3, 4]]] → [1, 2, 3, 4]\n",[51,2149,2150,2155],{"__ignoreMap":235},[239,2151,2152],{"class":241,"line":242},[239,2153,2154],{},"const flat = array.flat(Infinity);\n",[239,2156,2157],{"class":241,"line":248},[239,2158,2159],{},"\u002F\u002F [1, [2, [3, 4]]] → [1, 2, 3, 4]\n",[19,2161,2163],{"id":2162},"_7-check-if-an-element-is-in-the-viewport","7. Check if an Element is in the Viewport",[230,2165,2167],{"className":232,"code":2166,"language":234,"meta":235,"style":235},"const isVisible = (el) => {\n  const r = el.getBoundingClientRect();\n  return r.top \u003C window.innerHeight && r.bottom > 0;\n};\n",[51,2168,2169,2174,2179,2184],{"__ignoreMap":235},[239,2170,2171],{"class":241,"line":242},[239,2172,2173],{},"const isVisible = (el) => {\n",[239,2175,2176],{"class":241,"line":248},[239,2177,2178],{},"  const r = el.getBoundingClientRect();\n",[239,2180,2181],{"class":241,"line":257},[239,2182,2183],{},"  return r.top \u003C window.innerHeight && r.bottom > 0;\n",[239,2185,2186],{"class":241,"line":264},[239,2187,2188],{},"};\n",[19,2190,2192],{"id":2191},"_8-debounce-a-function","8. Debounce a Function",[230,2194,2196],{"className":232,"code":2195,"language":234,"meta":235,"style":235},"const debounce = (fn, ms) => {\n  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };\n};\n",[51,2197,2198,2203,2208],{"__ignoreMap":235},[239,2199,2200],{"class":241,"line":242},[239,2201,2202],{},"const debounce = (fn, ms) => {\n",[239,2204,2205],{"class":241,"line":248},[239,2206,2207],{},"  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };\n",[239,2209,2210],{"class":241,"line":257},[239,2211,2188],{},[15,2213,2214],{},"Okay, this one is two lines. But it saves you from installing lodash.",[19,2216,2218],{"id":2217},"_9-deep-clone-an-object","9. Deep Clone an Object",[230,2220,2222],{"className":232,"code":2221,"language":234,"meta":235,"style":235},"const clone = structuredClone(original);\n",[51,2223,2224],{"__ignoreMap":235},[239,2225,2226],{"class":241,"line":242},[239,2227,2221],{},[15,2229,2230,2231,2234],{},"Native deep cloning — handles dates, maps, sets, and circular references. Finally no more ",[51,2232,2233],{},"JSON.parse(JSON.stringify(...))"," hacks.",[19,2236,2238],{"id":2237},"_10-group-an-array-by-key","10. Group an Array by Key",[230,2240,2242],{"className":232,"code":2241,"language":234,"meta":235,"style":235},"const grouped = Object.groupBy(items, (item) => item.category);\n",[51,2243,2244],{"__ignoreMap":235},[239,2245,2246],{"class":241,"line":242},[239,2247,2241],{},[15,2249,2250,2253],{},[51,2251,2252],{},"Object.groupBy"," is a newer API (2024+). Falls back to a reduce for older environments:",[230,2255,2257],{"className":232,"code":2256,"language":234,"meta":235,"style":235},"const grouped = items.reduce((acc, item) => {\n  (acc[item.category] ??= []).push(item);\n  return acc;\n}, {});\n",[51,2258,2259,2264,2269,2274],{"__ignoreMap":235},[239,2260,2261],{"class":241,"line":242},[239,2262,2263],{},"const grouped = items.reduce((acc, item) => {\n",[239,2265,2266],{"class":241,"line":248},[239,2267,2268],{},"  (acc[item.category] ??= []).push(item);\n",[239,2270,2271],{"class":241,"line":257},[239,2272,2273],{},"  return acc;\n",[239,2275,2276],{"class":241,"line":264},[239,2277,2278],{},"}, {});\n",[2280,2281],"hr",{},[15,2283,2284],{},"These one-liners are the kind of thing you learn once and use forever. Bookmark this page and come back to it when you need a quick reference.",[15,2286,2287,2288,2292],{},"Want to format or test your JavaScript? Try our ",[725,2289,2291],{"href":2290},"\u002Fcode-formatter","Code Formatter"," for instant Prettier formatting right in the browser.",[731,2294,733],{},{"title":235,"searchDepth":248,"depth":248,"links":2296},[2297,2298,2299,2300,2301,2302,2303,2304,2305,2306],{"id":2060,"depth":248,"text":2061},{"id":2076,"depth":248,"text":2077},{"id":2098,"depth":248,"text":2099},{"id":2114,"depth":248,"text":2115},{"id":2130,"depth":248,"text":2131},{"id":2143,"depth":248,"text":2144},{"id":2162,"depth":248,"text":2163},{"id":2191,"depth":248,"text":2192},{"id":2217,"depth":248,"text":2218},{"id":2237,"depth":248,"text":2238},"2026-05-10","Clean, practical JavaScript one-liners for everyday tasks — from array tricks to clipboard access. No libraries needed.",{},"\u002Fblog\u002F10-javascript-one-liners-you-should-know",null,{"title":2049,"description":2308},"blog\u002F10-javascript-one-liners-you-should-know",[2315,234],"tips","buiDX40CsqiQ7A8cPZovqQwDd5aLh4VbdEMCM2fXUoE",{"id":2318,"title":2319,"author":6,"body":2320,"date":3087,"description":3088,"extension":755,"meta":3089,"navigation":260,"path":3090,"readingTime":408,"relatedTool":3091,"seo":3092,"stem":3093,"tags":3094,"__hash__":3095},"blog\u002Fblog\u002Fcss-gradients-complete-guide.md","CSS Gradients: From Basics to Beautiful Backgrounds",{"type":8,"value":2321,"toc":3071},[2322,2325,2328,2332,2335,2418,2422,2425,2456,2510,2514,2517,2599,2603,2606,2679,2681,2685,2706,2710,2757,2761,2832,2836,3019,3023,3052,3056,3059,3061,3068],[11,2323,2319],{"id":2324},"css-gradients-from-basics-to-beautiful-backgrounds",[15,2326,2327],{},"Gradients can transform a flat design into something that feels polished and professional. Here's everything you need to know.",[19,2329,2331],{"id":2330},"linear-gradients","Linear Gradients",[15,2333,2334],{},"The most common type — colors transition along a straight line.",[230,2336,2340],{"className":2337,"code":2338,"language":2339,"meta":235,"style":235},"language-css shiki shiki-themes github-light github-dark","\u002F* Top to bottom (default) *\u002F\nbackground: linear-gradient(#3b82f6, #8b5cf6);\n\n\u002F* With angle *\u002F\nbackground: linear-gradient(135deg, #667eea, #764ba2);\n\n\u002F* Multiple color stops *\u002F\nbackground: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);\n","css",[51,2341,2342,2348,2365,2369,2374,2389,2393,2398],{"__ignoreMap":235},[239,2343,2344],{"class":241,"line":242},[239,2345,2347],{"class":2346},"sJ8bj","\u002F* Top to bottom (default) *\u002F\n",[239,2349,2350,2353,2357,2359,2362],{"class":241,"line":248},[239,2351,2352],{"class":853},"background: linear-gradient(",[239,2354,2356],{"class":2355},"s7hpK","#3b82f6",[239,2358,1058],{"class":853},[239,2360,2361],{"class":2355},"#8b5cf6",[239,2363,2364],{"class":853},");\n",[239,2366,2367],{"class":241,"line":257},[239,2368,261],{"emptyLinePlaceholder":260},[239,2370,2371],{"class":241,"line":264},[239,2372,2373],{"class":2346},"\u002F* With angle *\u002F\n",[239,2375,2376,2379,2382,2384,2387],{"class":241,"line":270},[239,2377,2378],{"class":853},"background: linear-gradient(135deg, ",[239,2380,2381],{"class":2355},"#667eea",[239,2383,1058],{"class":853},[239,2385,2386],{"class":2355},"#764ba2",[239,2388,2364],{"class":853},[239,2390,2391],{"class":241,"line":408},[239,2392,261],{"emptyLinePlaceholder":260},[239,2394,2395],{"class":241,"line":414},[239,2396,2397],{"class":2346},"\u002F* Multiple color stops *\u002F\n",[239,2399,2400,2403,2406,2408,2411,2413,2416],{"class":241,"line":420},[239,2401,2402],{"class":853},"background: linear-gradient(90deg, ",[239,2404,2405],{"class":861},"#ff6b6b",[239,2407,1058],{"class":853},[239,2409,2410],{"class":861},"#feca57",[239,2412,1058],{"class":853},[239,2414,2415],{"class":2355},"#48dbfb",[239,2417,2364],{"class":853},[440,2419,2421],{"id":2420},"direction-keywords","Direction Keywords",[15,2423,2424],{},"Instead of angles, you can use keywords:",[230,2426,2428],{"className":2337,"code":2427,"language":2339,"meta":235,"style":235},"background: linear-gradient(to right, #3b82f6, #8b5cf6);\nbackground: linear-gradient(to bottom right, #3b82f6, #8b5cf6);\n",[51,2429,2430,2443],{"__ignoreMap":235},[239,2431,2432,2435,2437,2439,2441],{"class":241,"line":242},[239,2433,2434],{"class":853},"background: linear-gradient(to right, ",[239,2436,2356],{"class":2355},[239,2438,1058],{"class":853},[239,2440,2361],{"class":2355},[239,2442,2364],{"class":853},[239,2444,2445,2448,2450,2452,2454],{"class":241,"line":248},[239,2446,2447],{"class":853},"background: linear-gradient(to bottom right, ",[239,2449,2356],{"class":2355},[239,2451,1058],{"class":853},[239,2453,2361],{"class":2355},[239,2455,2364],{"class":853},[24,2457,2458,2468],{},[27,2459,2460],{},[30,2461,2462,2465],{},[33,2463,2464],{},"Keyword",[33,2466,2467],{},"Angle Equivalent",[43,2469,2470,2480,2490,2500],{},[30,2471,2472,2477],{},[48,2473,2474],{},[51,2475,2476],{},"to top",[48,2478,2479],{},"0deg",[30,2481,2482,2487],{},[48,2483,2484],{},[51,2485,2486],{},"to right",[48,2488,2489],{},"90deg",[30,2491,2492,2497],{},[48,2493,2494],{},[51,2495,2496],{},"to bottom",[48,2498,2499],{},"180deg (default)",[30,2501,2502,2507],{},[48,2503,2504],{},[51,2505,2506],{},"to left",[48,2508,2509],{},"270deg",[19,2511,2513],{"id":2512},"color-stops","Color Stops",[15,2515,2516],{},"You can control exactly where each color appears:",[230,2518,2520],{"className":2337,"code":2519,"language":2339,"meta":235,"style":235},"\u002F* Color at specific positions *\u002F\nbackground: linear-gradient(\n  90deg,\n  #3b82f6 0%,\n  #8b5cf6 50%,\n  #ec4899 100%\n);\n\n\u002F* Hard color stops (no transition) *\u002F\nbackground: linear-gradient(\n  90deg,\n  #3b82f6 50%,\n  #8b5cf6 50%\n);\n",[51,2521,2522,2527,2532,2537,2545,2553,2561,2565,2569,2574,2578,2582,2588,2595],{"__ignoreMap":235},[239,2523,2524],{"class":241,"line":242},[239,2525,2526],{"class":2346},"\u002F* Color at specific positions *\u002F\n",[239,2528,2529],{"class":241,"line":248},[239,2530,2531],{"class":853},"background: linear-gradient(\n",[239,2533,2534],{"class":241,"line":257},[239,2535,2536],{"class":853},"  90deg,\n",[239,2538,2539,2542],{"class":241,"line":264},[239,2540,2541],{"class":2355},"  #3b82f6",[239,2543,2544],{"class":853}," 0%,\n",[239,2546,2547,2550],{"class":241,"line":270},[239,2548,2549],{"class":2355},"  #8b5cf6",[239,2551,2552],{"class":853}," 50%,\n",[239,2554,2555,2558],{"class":241,"line":408},[239,2556,2557],{"class":861},"  #ec4899",[239,2559,2560],{"class":853}," 100%\n",[239,2562,2563],{"class":241,"line":414},[239,2564,2364],{"class":853},[239,2566,2567],{"class":241,"line":420},[239,2568,261],{"emptyLinePlaceholder":260},[239,2570,2571],{"class":241,"line":425},[239,2572,2573],{"class":2346},"\u002F* Hard color stops (no transition) *\u002F\n",[239,2575,2576],{"class":241,"line":431},[239,2577,2531],{"class":853},[239,2579,2580],{"class":241,"line":576},[239,2581,2536],{"class":853},[239,2583,2584,2586],{"class":241,"line":652},[239,2585,2541],{"class":2355},[239,2587,2552],{"class":853},[239,2589,2590,2592],{"class":241,"line":657},[239,2591,2549],{"class":2355},[239,2593,2594],{"class":853}," 50%\n",[239,2596,2597],{"class":241,"line":663},[239,2598,2364],{"class":853},[19,2600,2602],{"id":2601},"radial-gradients","Radial Gradients",[15,2604,2605],{},"Colors radiate outward from a center point:",[230,2607,2609],{"className":2337,"code":2608,"language":2339,"meta":235,"style":235},"\u002F* Default: ellipse from center *\u002F\nbackground: radial-gradient(#3b82f6, #1e3a8a);\n\n\u002F* Circle shape *\u002F\nbackground: radial-gradient(circle, #3b82f6, #1e3a8a);\n\n\u002F* Custom position *\u002F\nbackground: radial-gradient(circle at 25% 25%, #3b82f6, transparent);\n",[51,2610,2611,2616,2630,2634,2639,2656,2660,2665],{"__ignoreMap":235},[239,2612,2613],{"class":241,"line":242},[239,2614,2615],{"class":2346},"\u002F* Default: ellipse from center *\u002F\n",[239,2617,2618,2621,2623,2625,2628],{"class":241,"line":248},[239,2619,2620],{"class":853},"background: radial-gradient(",[239,2622,2356],{"class":2355},[239,2624,1058],{"class":853},[239,2626,2627],{"class":2355},"#1e3a8a",[239,2629,2364],{"class":853},[239,2631,2632],{"class":241,"line":257},[239,2633,261],{"emptyLinePlaceholder":260},[239,2635,2636],{"class":241,"line":264},[239,2637,2638],{"class":2346},"\u002F* Circle shape *\u002F\n",[239,2640,2641,2643,2646,2648,2650,2652,2654],{"class":241,"line":270},[239,2642,2620],{"class":853},[239,2644,2645],{"class":857},"circle",[239,2647,1058],{"class":853},[239,2649,2356],{"class":2355},[239,2651,1058],{"class":853},[239,2653,2627],{"class":2355},[239,2655,2364],{"class":853},[239,2657,2658],{"class":241,"line":408},[239,2659,261],{"emptyLinePlaceholder":260},[239,2661,2662],{"class":241,"line":414},[239,2663,2664],{"class":2346},"\u002F* Custom position *\u002F\n",[239,2666,2667,2669,2671,2674,2676],{"class":241,"line":420},[239,2668,2620],{"class":853},[239,2670,2645],{"class":857},[239,2672,2673],{"class":853}," at 25% 25%, ",[239,2675,2356],{"class":2355},[239,2677,2678],{"class":853},", transparent);\n",[19,2680,438],{"id":437},[440,2682,2684],{"id":2683},"subtle-page-background","Subtle page background",[230,2686,2688],{"className":2337,"code":2687,"language":2339,"meta":235,"style":235},"background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n",[51,2689,2690],{"__ignoreMap":235},[239,2691,2692,2694,2697,2700,2703],{"class":241,"line":242},[239,2693,2378],{"class":853},[239,2695,2696],{"class":861},"#f5f7fa",[239,2698,2699],{"class":853}," 0%, ",[239,2701,2702],{"class":861},"#c3cfe2",[239,2704,2705],{"class":853}," 100%);\n",[440,2707,2709],{"id":2708},"glassmorphism-overlay","Glassmorphism overlay",[230,2711,2713],{"className":2337,"code":2712,"language":2339,"meta":235,"style":235},"background: linear-gradient(\n  135deg,\n  rgba(255, 255, 255, 0.1),\n  rgba(255, 255, 255, 0.05)\n);\nbackdrop-filter: blur(10px);\n",[51,2714,2715,2719,2724,2735,2745,2749],{"__ignoreMap":235},[239,2716,2717],{"class":241,"line":242},[239,2718,2531],{"class":853},[239,2720,2721],{"class":241,"line":248},[239,2722,2723],{"class":853},"  135deg,\n",[239,2725,2726,2729,2732],{"class":241,"line":257},[239,2727,2728],{"class":853},"  rgba(255, 255, 255, 0",[239,2730,2731],{"class":861},".1",[239,2733,2734],{"class":853},"),\n",[239,2736,2737,2739,2742],{"class":241,"line":264},[239,2738,2728],{"class":853},[239,2740,2741],{"class":861},".05",[239,2743,2744],{"class":853},")\n",[239,2746,2747],{"class":241,"line":270},[239,2748,2364],{"class":853},[239,2750,2751,2754],{"class":241,"line":408},[239,2752,2753],{"class":857},"backdrop-filter",[239,2755,2756],{"class":853},": blur(10px);\n",[440,2758,2760],{"id":2759},"text-gradient","Text gradient",[230,2762,2764],{"className":2337,"code":2763,"language":2339,"meta":235,"style":235},".gradient-text {\n  background: linear-gradient(135deg, #3b82f6, #8b5cf6);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n",[51,2765,2766,2774,2804,2816,2828],{"__ignoreMap":235},[239,2767,2768,2771],{"class":241,"line":242},[239,2769,2770],{"class":861},".gradient-text",[239,2772,2773],{"class":853}," {\n",[239,2775,2776,2779,2781,2784,2787,2790,2794,2796,2798,2800,2802],{"class":241,"line":248},[239,2777,2778],{"class":1092},"  background",[239,2780,683],{"class":853},[239,2782,2783],{"class":1092},"linear-gradient",[239,2785,2786],{"class":853},"(",[239,2788,2789],{"class":1092},"135",[239,2791,2793],{"class":2792},"szBVR","deg",[239,2795,1058],{"class":853},[239,2797,2356],{"class":1092},[239,2799,1058],{"class":853},[239,2801,2361],{"class":1092},[239,2803,2364],{"class":853},[239,2805,2806,2809,2811,2813],{"class":241,"line":257},[239,2807,2808],{"class":1092},"  -webkit-background-clip",[239,2810,683],{"class":853},[239,2812,785],{"class":1092},[239,2814,2815],{"class":853},";\n",[239,2817,2818,2821,2823,2826],{"class":241,"line":264},[239,2819,2820],{"class":1092},"  -webkit-text-fill-color",[239,2822,683],{"class":853},[239,2824,2825],{"class":1092},"transparent",[239,2827,2815],{"class":853},[239,2829,2830],{"class":241,"line":270},[239,2831,1116],{"class":853},[440,2833,2835],{"id":2834},"animated-gradient","Animated gradient",[230,2837,2839],{"className":2337,"code":2838,"language":2339,"meta":235,"style":235},".animated-gradient {\n  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n  background-size: 400% 400%;\n  animation: gradient 15s ease infinite;\n}\n\n@keyframes gradient {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n",[51,2840,2841,2848,2885,2905,2927,2931,2935,2946,2972,2994,3015],{"__ignoreMap":235},[239,2842,2843,2846],{"class":241,"line":242},[239,2844,2845],{"class":861},".animated-gradient",[239,2847,2773],{"class":853},[239,2849,2850,2852,2854,2856,2858,2861,2863,2865,2868,2870,2873,2875,2878,2880,2883],{"class":241,"line":248},[239,2851,2778],{"class":1092},[239,2853,683],{"class":853},[239,2855,2783],{"class":1092},[239,2857,2786],{"class":853},[239,2859,2860],{"class":1092},"-45",[239,2862,2793],{"class":2792},[239,2864,1058],{"class":853},[239,2866,2867],{"class":1092},"#ee7752",[239,2869,1058],{"class":853},[239,2871,2872],{"class":1092},"#e73c7e",[239,2874,1058],{"class":853},[239,2876,2877],{"class":1092},"#23a6d5",[239,2879,1058],{"class":853},[239,2881,2882],{"class":1092},"#23d5ab",[239,2884,2364],{"class":853},[239,2886,2887,2890,2892,2895,2898,2901,2903],{"class":241,"line":257},[239,2888,2889],{"class":1092},"  background-size",[239,2891,683],{"class":853},[239,2893,2894],{"class":1092},"400",[239,2896,2897],{"class":2792},"%",[239,2899,2900],{"class":1092}," 400",[239,2902,2897],{"class":2792},[239,2904,2815],{"class":853},[239,2906,2907,2910,2913,2916,2919,2922,2925],{"class":241,"line":264},[239,2908,2909],{"class":1092},"  animation",[239,2911,2912],{"class":853},": gradient ",[239,2914,2915],{"class":1092},"15",[239,2917,2918],{"class":2792},"s",[239,2920,2921],{"class":1092}," ease",[239,2923,2924],{"class":1092}," infinite",[239,2926,2815],{"class":853},[239,2928,2929],{"class":241,"line":270},[239,2930,1116],{"class":853},[239,2932,2933],{"class":241,"line":408},[239,2934,261],{"emptyLinePlaceholder":260},[239,2936,2937,2940,2944],{"class":241,"line":414},[239,2938,2939],{"class":2792},"@keyframes",[239,2941,2943],{"class":2942},"s4XuR"," gradient",[239,2945,2773],{"class":853},[239,2947,2948,2951,2954,2957,2959,2962,2964,2967,2969],{"class":241,"line":420},[239,2949,2950],{"class":861},"  0%",[239,2952,2953],{"class":853}," { ",[239,2955,2956],{"class":1092},"background-position",[239,2958,683],{"class":853},[239,2960,2961],{"class":1092},"0",[239,2963,2897],{"class":2792},[239,2965,2966],{"class":1092}," 50",[239,2968,2897],{"class":2792},[239,2970,2971],{"class":853},"; }\n",[239,2973,2974,2977,2979,2981,2983,2986,2988,2990,2992],{"class":241,"line":425},[239,2975,2976],{"class":861},"  50%",[239,2978,2953],{"class":853},[239,2980,2956],{"class":1092},[239,2982,683],{"class":853},[239,2984,2985],{"class":1092},"100",[239,2987,2897],{"class":2792},[239,2989,2966],{"class":1092},[239,2991,2897],{"class":2792},[239,2993,2971],{"class":853},[239,2995,2996,2999,3001,3003,3005,3007,3009,3011,3013],{"class":241,"line":431},[239,2997,2998],{"class":861},"  100%",[239,3000,2953],{"class":853},[239,3002,2956],{"class":1092},[239,3004,683],{"class":853},[239,3006,2961],{"class":1092},[239,3008,2897],{"class":2792},[239,3010,2966],{"class":1092},[239,3012,2897],{"class":2792},[239,3014,2971],{"class":853},[239,3016,3017],{"class":241,"line":576},[239,3018,1116],{"class":853},[19,3020,3022],{"id":3021},"performance-tips","Performance Tips",[675,3024,3025,3031,3037,3046],{},[678,3026,3027,3030],{},[222,3028,3029],{},"Gradients are rendered by the GPU"," — they're fast and don't affect performance",[678,3032,3033,3036],{},[222,3034,3035],{},"Avoid very complex gradients"," with 10+ color stops on large areas",[678,3038,3039,3045],{},[222,3040,3041,3042],{},"Use ",[51,3043,3044],{},"will-change: background"," for animated gradients",[678,3047,3048,3051],{},[222,3049,3050],{},"Prefer CSS gradients over images"," — they're resolution-independent and load instantly",[19,3053,3055],{"id":3054},"browser-support","Browser Support",[15,3057,3058],{},"CSS gradients work in all modern browsers. No prefixes needed since 2015.",[19,3060,991],{"id":990},[15,3062,994,3063,3067],{},[725,3064,3066],{"href":3065},"\u002Fcss-gradient-generator","CSS Gradient Generator"," to visually create gradients with multiple color stops, adjust angles, and copy the CSS instantly. It supports both linear and radial gradients.",[731,3069,3070],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":235,"searchDepth":248,"depth":248,"links":3072},[3073,3076,3077,3078,3084,3085,3086],{"id":2330,"depth":248,"text":2331,"children":3074},[3075],{"id":2420,"depth":257,"text":2421},{"id":2512,"depth":248,"text":2513},{"id":2601,"depth":248,"text":2602},{"id":437,"depth":248,"text":438,"children":3079},[3080,3081,3082,3083],{"id":2683,"depth":257,"text":2684},{"id":2708,"depth":257,"text":2709},{"id":2759,"depth":257,"text":2760},{"id":2834,"depth":257,"text":2835},{"id":3021,"depth":248,"text":3022},{"id":3054,"depth":248,"text":3055},{"id":990,"depth":248,"text":991},"2026-05-08","Master CSS gradients — linear, radial, and conic. Learn syntax, color stops, real-world patterns, and performance tips with practical examples.",{},"\u002Fblog\u002Fcss-gradients-complete-guide","css-gradient-generator",{"title":2319,"description":3088},"blog\u002Fcss-gradients-complete-guide",[762,2339],"YMhdz_zNgtgIq0_x8a0WIfnnW7Bdr_R1ssGYf1BN8Rk",1779031064150]