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