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