[{"data":1,"prerenderedAt":1114},["ShallowReactive",2],{"/guides/gradients":3,"surround":1105},{"id":4,"title":5,"body":6,"date":1095,"description":1096,"extension":1097,"meta":1098,"navigation":1099,"path":1100,"seo":1101,"sitemap":1102,"stem":1103,"__hash__":1104},"guides/guides/gradients.md","How to use CSS background gradients in HTML emails",{"type":7,"value":8,"toc":1083},"minimark",[9,13,19,30,45,50,53,76,83,86,93,106,112,128,134,138,144,149,164,236,245,248,310,321,325,332,335,457,461,466,469,608,619,625,629,632,635,654,657,827,835,839,846,853,961,964,1058,1062,1079],[10,11,5],"h1",{"id":12},"how-to-use-css-background-gradients-in-html-emails",[14,15,18],"p",{"className":16},[17],"text-sm","Last updated: May 30, 2022",[14,20,21,22,29],{},"Many email clients ",[23,24,28],"a",{"href":25,"rel":26},"https://www.caniemail.com/features/css-linear-gradient/",[27],"nofollow","support CSS background gradients",".",[14,31,32,33,38,39,44],{},"In this tutorial, you will learn how to use the ",[23,34,37],{"href":35,"rel":36},"https://www.npmjs.com/package/tailwindcss-gradients",[27],"tailwindcss-gradients"," plugin to add colorful gradients to your HTML email templates. We will also cover how to add a ",[40,41,43],"abbr",{"title":42},"Vector Markup Language","VML"," fallback for Outlook on Windows.",[46,47,49],"h2",{"id":48},"getting-started","Getting started",[14,51,52],{},"Let's start by creating a new Maizzle project.",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[61,62,63],"code",{"__ignoreMap":59},[64,65,68,72],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sizJ4","npx",[64,73,75],{"class":74},"sfCc6"," create-maizzle\n",[14,77,78,79,82],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[61,80,81],{},"./example-gradients",", and select the Default Starter.",[14,84,85],{},"Choose Yes when prompted to Install dependencies.",[14,87,88,89,92],{},"After dependencies finish installing, change the current directory to ",[61,90,91],{},"example-gradients",":",[54,94,96],{"className":56,"code":95,"language":58,"meta":59,"style":59},"cd example-gradients\n",[61,97,98],{"__ignoreMap":59},[64,99,100,103],{"class":66,"line":67},[64,101,102],{"class":70},"cd",[64,104,105],{"class":74}," example-gradients\n",[14,107,108,109,111],{},"Next, install the ",[61,110,37],{}," plugin:",[54,113,115],{"className":56,"code":114,"language":58,"meta":59,"style":59},"npm install tailwindcss-gradients\n",[61,116,117],{"__ignoreMap":59},[64,118,119,122,125],{"class":66,"line":67},[64,120,121],{"class":70},"npm",[64,123,124],{"class":74}," install",[64,126,127],{"class":74}," tailwindcss-gradients\n",[14,129,130,131,133],{},"Once it finishes, open the ",[61,132,91],{}," folder in your favorite code editor.",[46,135,137],{"id":136},"css-gradients","CSS Gradients",[14,139,140,141,143],{},"Let's configure and use ",[61,142,37],{}," with Tailwind CSS.",[145,146,148],"h3",{"id":147},"tailwind-css-config","Tailwind CSS config",[14,150,151,152,155,156,159,160,163],{},"We need to tell Tailwind CSS to use the plugin. Edit ",[61,153,154],{},"tailwind.config.js"," and ",[61,157,158],{},"require()"," the plugin inside the ",[61,161,162],{},"plugins: []"," array:",[54,165,171],{"className":166,"code":167,"filename":154,"highlights":168,"language":170,"meta":59,"style":59},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","module.exports = {\n  plugins: [\n    require('tailwindcss-gradients'), // [!code ++]\n  ]\n}\n",[169],3,"js",[61,172,173,191,202,224,230],{"__ignoreMap":59},[64,174,175,178,181,184,188],{"class":66,"line":67},[64,176,177],{"class":70},"module",[64,179,29],{"class":180},"sprQ5",[64,182,183],{"class":70},"exports",[64,185,187],{"class":186},"sVevU"," =",[64,189,190],{"class":180}," {\n",[64,192,194,197,199],{"class":66,"line":193},2,[64,195,196],{"class":74},"  plugins",[64,198,92],{"class":180},[64,200,201],{"class":74}," [\n",[64,203,208,212,215,218,221],{"class":204,"line":169},[66,205,206,207],"highlight","diff","add",[64,209,211],{"class":210},"s2ImL","    require",[64,213,214],{"class":74},"(",[64,216,217],{"class":74},"'tailwindcss-gradients'",[64,219,220],{"class":74},")",[64,222,223],{"class":180},",",[64,225,227],{"class":66,"line":226},4,[64,228,229],{"class":74},"  ]\n",[64,231,233],{"class":66,"line":232},5,[64,234,235],{"class":180},"}\n",[14,237,238,239,242,243,29],{},"Next, we need to define what kind of gradients we want to generate, based on which colors. We do that in the ",[61,240,241],{},"theme: {}"," key from ",[61,244,154],{},[14,246,247],{},"For example, let's register linear gradients based on the existing color palette:",[54,249,252],{"className":166,"code":250,"filename":154,"highlights":251,"language":170,"meta":59,"style":59},"module.exports = {\n  theme: {\n    linearGradientColors: theme => theme('colors'), // [!code ++]\n  }\n}\n",[169],[61,253,254,266,275,301,306],{"__ignoreMap":59},[64,255,256,258,260,262,264],{"class":66,"line":67},[64,257,177],{"class":70},[64,259,29],{"class":180},[64,261,183],{"class":70},[64,263,187],{"class":186},[64,265,190],{"class":180},[64,267,268,271,273],{"class":66,"line":193},[64,269,270],{"class":74},"  theme",[64,272,92],{"class":180},[64,274,190],{"class":180},[64,276,278,281,283,287,290,292,294,297,299],{"class":277,"line":169},[66,205,206,207],[64,279,280],{"class":210},"    linearGradientColors",[64,282,92],{"class":180},[64,284,286],{"class":285},"s8qYB"," theme",[64,288,289],{"class":285}," =>",[64,291,286],{"class":210},[64,293,214],{"class":74},[64,295,296],{"class":74},"'colors'",[64,298,220],{"class":74},[64,300,223],{"class":180},[64,302,303],{"class":66,"line":226},[64,304,305],{"class":180},"  }\n",[64,307,308],{"class":66,"line":232},[64,309,235],{"class":180},[311,312,313,315,316,320],"alert",{},[61,314,37],{},"\n can generate many other types of gradients (although not all are supported in email). See all \n",[23,317,319],{"href":318},"https://github.com/benface/tailwindcss-gradients","\nconfiguration options\n","\n.\n",[145,322,324],{"id":323},"use-in-html","Use in HTML",[14,326,327,328,331],{},"Simply add the utility class on an element that supports ",[61,329,330],{},"background-image"," CSS.",[14,333,334],{},"We also specify a background color first, so that email clients that don't support CSS background-image gradients can display a fallback:",[54,336,341],{"className":337,"code":338,"filename":339,"language":340,"meta":59,"style":59},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-gray-200 bg-gradient-b-black\">\n        \u003C!-- ... -->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n","emails/example.html","html",[61,342,343,355,380,390,411,417,427,437,447],{"__ignoreMap":59},[64,344,345,349,352],{"class":66,"line":67},[64,346,348],{"class":347},"soJEP","\u003C",[64,350,351],{"class":70},"x-main",[64,353,354],{"class":347},">\n",[64,356,357,360,363,367,370,373,376,378],{"class":66,"line":193},[64,358,359],{"class":347},"  \u003C",[64,361,362],{"class":70},"table",[64,364,366],{"class":365},"sQMLp"," class",[64,368,369],{"class":347},"=",[64,371,372],{"class":365},"\"",[64,374,375],{"class":74},"w-full",[64,377,372],{"class":365},[64,379,354],{"class":347},[64,381,382,385,388],{"class":66,"line":169},[64,383,384],{"class":347},"    \u003C",[64,386,387],{"class":70},"tr",[64,389,354],{"class":347},[64,391,392,395,398,400,402,404,407,409],{"class":66,"line":226},[64,393,394],{"class":347},"      \u003C",[64,396,397],{"class":70},"td",[64,399,366],{"class":365},[64,401,369],{"class":347},[64,403,372],{"class":365},[64,405,406],{"class":74},"bg-gray-200 bg-gradient-b-black",[64,408,372],{"class":365},[64,410,354],{"class":347},[64,412,413],{"class":66,"line":232},[64,414,416],{"class":415},"smVoC","        \u003C!-- ... -->\n",[64,418,420,423,425],{"class":66,"line":419},6,[64,421,422],{"class":347},"      \u003C/",[64,424,397],{"class":70},[64,426,354],{"class":347},[64,428,430,433,435],{"class":66,"line":429},7,[64,431,432],{"class":347},"    \u003C/",[64,434,387],{"class":70},[64,436,354],{"class":347},[64,438,440,443,445],{"class":66,"line":439},8,[64,441,442],{"class":347},"  \u003C/",[64,444,362],{"class":70},[64,446,354],{"class":347},[64,448,450,453,455],{"class":66,"line":449},9,[64,451,452],{"class":347},"\u003C/",[64,454,351],{"class":70},[64,456,354],{"class":347},[46,458,460],{"id":459},"outlook-vml","Outlook VML",[14,462,463,464,29],{},"Outlook for Windows doesn't support CSS gradients, but we can use ",[40,465,43],{"title":42},[14,467,468],{},"You need to add it right after the element with the CSS gradient class:",[54,470,475],{"className":337,"code":471,"filename":339,"highlights":472,"language":340,"meta":59,"style":59},"\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-blue-500 bg-gradient-b-black-transparent\">\n        \u003C!--[if gte mso 9]>\n        \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;\">\n        \u003Cv:fill type=\"gradient\" color=\"#0072FF\" color2=\"#00C6FF\" angle=\"90\" />\n        \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n        \u003Cdiv>\u003C![endif]-->\n        [your overlayed HTML here]\n        \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[232,419,429,439,449,473,474],10,11,[61,476,477,485,503,511,530,536,542,548,554,560,566,572,581,590,599],{"__ignoreMap":59},[64,478,479,481,483],{"class":66,"line":67},[64,480,348],{"class":347},[64,482,351],{"class":70},[64,484,354],{"class":347},[64,486,487,489,491,493,495,497,499,501],{"class":66,"line":193},[64,488,359],{"class":347},[64,490,362],{"class":70},[64,492,366],{"class":365},[64,494,369],{"class":347},[64,496,372],{"class":365},[64,498,375],{"class":74},[64,500,372],{"class":365},[64,502,354],{"class":347},[64,504,505,507,509],{"class":66,"line":169},[64,506,384],{"class":347},[64,508,387],{"class":70},[64,510,354],{"class":347},[64,512,513,515,517,519,521,523,526,528],{"class":66,"line":226},[64,514,394],{"class":347},[64,516,397],{"class":70},[64,518,366],{"class":365},[64,520,369],{"class":347},[64,522,372],{"class":365},[64,524,525],{"class":74},"bg-blue-500 bg-gradient-b-black-transparent",[64,527,372],{"class":365},[64,529,354],{"class":347},[64,531,533],{"class":532,"line":232},[66,205],[64,534,535],{"class":415},"        \u003C!--[if gte mso 9]>\n",[64,537,539],{"class":538,"line":419},[66,205],[64,540,541],{"class":415},"        \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;\">\n",[64,543,545],{"class":544,"line":429},[66,205],[64,546,547],{"class":415},"        \u003Cv:fill type=\"gradient\" color=\"#0072FF\" color2=\"#00C6FF\" angle=\"90\" />\n",[64,549,551],{"class":550,"line":439},[66,205],[64,552,553],{"class":415},"        \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[64,555,557],{"class":556,"line":449},[66,205],[64,558,559],{"class":415},"        \u003Cdiv>\u003C![endif]-->\n",[64,561,563],{"class":562,"line":473},[66,205],[64,564,565],{"class":74},"        [your overlayed HTML here]\n",[64,567,569],{"class":568,"line":474},[66,205],[64,570,571],{"class":415},"        \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[64,573,575,577,579],{"class":66,"line":574},12,[64,576,422],{"class":347},[64,578,397],{"class":70},[64,580,354],{"class":347},[64,582,584,586,588],{"class":66,"line":583},13,[64,585,432],{"class":347},[64,587,387],{"class":70},[64,589,354],{"class":347},[64,591,593,595,597],{"class":66,"line":592},14,[64,594,442],{"class":347},[64,596,362],{"class":70},[64,598,354],{"class":347},[64,600,602,604,606],{"class":66,"line":601},15,[64,603,452],{"class":347},[64,605,351],{"class":70},[64,607,354],{"class":347},[14,609,610,611,614,615,618],{},"As you can see, you need to set a fixed width on the ",[61,612,613],{},"\u003Cv:rect>"," element - it is recommended instead of using ",[61,616,617],{},"mso-width-percent: 1000;",", as that is pretty buggy (especially in Outlook 2013).",[311,620,621,622,624],{},"\nThe width of the \n",[61,623,613],{},"\n element needs to match the width of its parent element.\n",[145,626,628],{"id":627},"body-gradient","Body gradient",[14,630,631],{},"We can also add a VML gradient to the body of the email.",[14,633,634],{},"To achieve this, we:",[636,637,638,646],"ol",{},[639,640,641,642,645],"li",{},"create a ",[61,643,644],{},"\u003Cdiv>"," that wraps our template: this will be used as the solid background color fallback",[639,647,648,649,651,652],{},"place the VML code immediately inside that div, basically wrapping our entire template. Note how we're using ",[61,650,617],{}," instead of a fixed width on the ",[61,653,613],{},[14,655,656],{},"Here's an example:",[54,658,660],{"className":337,"code":659,"filename":339,"language":340,"meta":59,"style":59},"\u003Cx-main>\n  \u003Cdiv class=\"bg-gray-200\">\n    \u003C!--[if gte mso 9]>\n    \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"mso-width-percent:1000;\">\n    \u003Cv:fill type=\"gradient\" color=\"#edf2f7\" color2=\"#cbd5e0\" />\n    \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n    \u003Cdiv>\u003C![endif]-->\n    \u003Ctable class=\"w-full font-sans\">\n      \u003Ctr>\n        \u003Ctd align=\"center\" class=\"bg-gradient-t-gray-400\">\n          \u003C!-- your content here... -->\n        \u003C/td>\n      \u003C/tr>\n    \u003C/table>\n    \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n  \u003C/div>\n\u003C/x-main>\n",[61,661,662,670,690,695,700,705,710,715,734,742,774,779,788,796,804,809,818],{"__ignoreMap":59},[64,663,664,666,668],{"class":66,"line":67},[64,665,348],{"class":347},[64,667,351],{"class":70},[64,669,354],{"class":347},[64,671,672,674,677,679,681,683,686,688],{"class":66,"line":193},[64,673,359],{"class":347},[64,675,676],{"class":70},"div",[64,678,366],{"class":365},[64,680,369],{"class":347},[64,682,372],{"class":365},[64,684,685],{"class":74},"bg-gray-200",[64,687,372],{"class":365},[64,689,354],{"class":347},[64,691,692],{"class":66,"line":169},[64,693,694],{"class":415},"    \u003C!--[if gte mso 9]>\n",[64,696,697],{"class":66,"line":226},[64,698,699],{"class":415},"    \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"mso-width-percent:1000;\">\n",[64,701,702],{"class":66,"line":232},[64,703,704],{"class":415},"    \u003Cv:fill type=\"gradient\" color=\"#edf2f7\" color2=\"#cbd5e0\" />\n",[64,706,707],{"class":66,"line":419},[64,708,709],{"class":415},"    \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[64,711,712],{"class":66,"line":429},[64,713,714],{"class":415},"    \u003Cdiv>\u003C![endif]-->\n",[64,716,717,719,721,723,725,727,730,732],{"class":66,"line":439},[64,718,384],{"class":347},[64,720,362],{"class":70},[64,722,366],{"class":365},[64,724,369],{"class":347},[64,726,372],{"class":365},[64,728,729],{"class":74},"w-full font-sans",[64,731,372],{"class":365},[64,733,354],{"class":347},[64,735,736,738,740],{"class":66,"line":449},[64,737,394],{"class":347},[64,739,387],{"class":70},[64,741,354],{"class":347},[64,743,744,747,749,752,754,756,759,761,763,765,767,770,772],{"class":66,"line":473},[64,745,746],{"class":347},"        \u003C",[64,748,397],{"class":70},[64,750,751],{"class":365}," align",[64,753,369],{"class":347},[64,755,372],{"class":365},[64,757,758],{"class":74},"center",[64,760,372],{"class":365},[64,762,366],{"class":365},[64,764,369],{"class":347},[64,766,372],{"class":365},[64,768,769],{"class":74},"bg-gradient-t-gray-400",[64,771,372],{"class":365},[64,773,354],{"class":347},[64,775,776],{"class":66,"line":474},[64,777,778],{"class":415},"          \u003C!-- your content here... -->\n",[64,780,781,784,786],{"class":66,"line":574},[64,782,783],{"class":347},"        \u003C/",[64,785,397],{"class":70},[64,787,354],{"class":347},[64,789,790,792,794],{"class":66,"line":583},[64,791,422],{"class":347},[64,793,387],{"class":70},[64,795,354],{"class":347},[64,797,798,800,802],{"class":66,"line":592},[64,799,432],{"class":347},[64,801,362],{"class":70},[64,803,354],{"class":347},[64,805,806],{"class":66,"line":601},[64,807,808],{"class":415},"    \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[64,810,812,814,816],{"class":66,"line":811},16,[64,813,442],{"class":347},[64,815,676],{"class":70},[64,817,354],{"class":347},[64,819,821,823,825],{"class":66,"line":820},17,[64,822,452],{"class":347},[64,824,351],{"class":70},[64,826,354],{"class":347},[14,828,829,830,29],{},"You can see both examples in the ",[23,831,834],{"href":832,"rel":833},"https://github.com/maizzle/example-gradients",[27],"project repository",[46,836,838],{"id":837},"avoid-inlining","Avoid inlining",[14,840,841,842,845],{},"Most email clients that support CSS gradients also support ",[61,843,844],{},"@media"," queries.",[14,847,848,849,852],{},"We can register a ",[61,850,851],{},"screen"," breakpoint to prevent Juice from inlining our gradient:",[54,854,857],{"className":166,"code":855,"filename":154,"highlights":856,"language":170,"meta":59,"style":59},"module.exports = {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[419],[61,858,859,871,879,888,909,927,948,953,957],{"__ignoreMap":59},[64,860,861,863,865,867,869],{"class":66,"line":67},[64,862,177],{"class":70},[64,864,29],{"class":180},[64,866,183],{"class":70},[64,868,187],{"class":186},[64,870,190],{"class":180},[64,872,873,875,877],{"class":66,"line":193},[64,874,270],{"class":74},[64,876,92],{"class":180},[64,878,190],{"class":180},[64,880,881,884,886],{"class":66,"line":169},[64,882,883],{"class":74},"    screens",[64,885,92],{"class":180},[64,887,190],{"class":180},[64,889,890,893,895,898,901,903,906],{"class":66,"line":226},[64,891,892],{"class":74},"      sm",[64,894,92],{"class":180},[64,896,897],{"class":180}," {",[64,899,900],{"class":74},"max",[64,902,92],{"class":180},[64,904,905],{"class":74}," '600px'",[64,907,908],{"class":180},"},\n",[64,910,911,914,916,918,920,922,925],{"class":66,"line":232},[64,912,913],{"class":74},"      xs",[64,915,92],{"class":180},[64,917,897],{"class":180},[64,919,900],{"class":74},[64,921,92],{"class":180},[64,923,924],{"class":74}," '425px'",[64,926,908],{"class":180},[64,928,930,933,935,937,940,942,945],{"class":929,"line":419},[66,205,206,207],[64,931,932],{"class":74},"      screen",[64,934,92],{"class":180},[64,936,897],{"class":180},[64,938,939],{"class":74},"raw",[64,941,92],{"class":180},[64,943,944],{"class":74}," 'screen'",[64,946,947],{"class":180},"},",[64,949,950],{"class":66,"line":429},[64,951,952],{"class":180},"    }\n",[64,954,955],{"class":66,"line":439},[64,956,305],{"class":180},[64,958,959],{"class":66,"line":449},[64,960,235],{"class":180},[14,962,963],{},"We can then write the utility class like this:",[54,965,967],{"className":337,"code":966,"filename":339,"language":340,"meta":59,"style":59},"\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-gray-200 screen:bg-gradient-b-black\">\n        \u003C!-- ... -->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[61,968,969,977,995,1003,1022,1026,1034,1042,1050],{"__ignoreMap":59},[64,970,971,973,975],{"class":66,"line":67},[64,972,348],{"class":347},[64,974,351],{"class":70},[64,976,354],{"class":347},[64,978,979,981,983,985,987,989,991,993],{"class":66,"line":193},[64,980,359],{"class":347},[64,982,362],{"class":70},[64,984,366],{"class":365},[64,986,369],{"class":347},[64,988,372],{"class":365},[64,990,375],{"class":74},[64,992,372],{"class":365},[64,994,354],{"class":347},[64,996,997,999,1001],{"class":66,"line":169},[64,998,384],{"class":347},[64,1000,387],{"class":70},[64,1002,354],{"class":347},[64,1004,1005,1007,1009,1011,1013,1015,1018,1020],{"class":66,"line":226},[64,1006,394],{"class":347},[64,1008,397],{"class":70},[64,1010,366],{"class":365},[64,1012,369],{"class":347},[64,1014,372],{"class":365},[64,1016,1017],{"class":74},"bg-gray-200 screen:bg-gradient-b-black",[64,1019,372],{"class":365},[64,1021,354],{"class":347},[64,1023,1024],{"class":66,"line":232},[64,1025,416],{"class":415},[64,1027,1028,1030,1032],{"class":66,"line":419},[64,1029,422],{"class":347},[64,1031,397],{"class":70},[64,1033,354],{"class":347},[64,1035,1036,1038,1040],{"class":66,"line":429},[64,1037,432],{"class":347},[64,1039,387],{"class":70},[64,1041,354],{"class":347},[64,1043,1044,1046,1048],{"class":66,"line":439},[64,1045,442],{"class":347},[64,1047,362],{"class":70},[64,1049,354],{"class":347},[64,1051,1052,1054,1056],{"class":66,"line":449},[64,1053,452],{"class":347},[64,1055,351],{"class":70},[64,1057,354],{"class":347},[46,1059,1061],{"id":1060},"resources","Resources",[1063,1064,1065,1071],"ul",{},[639,1066,1067,1070],{},[23,1068,37],{"href":35,"rel":1069},[27]," plugin",[639,1072,1073,1078],{},[23,1074,1077],{"href":1075,"rel":1076},"https://github.com/maizzle/starter-gradients",[27],"GitHub repository"," for this tutorial",[1080,1081,1082],"style",{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-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 .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}",{"title":59,"searchDepth":193,"depth":193,"links":1084},[1085,1086,1090,1093,1094],{"id":48,"depth":193,"text":49},{"id":136,"depth":193,"text":137,"children":1087},[1088,1089],{"id":147,"depth":169,"text":148},{"id":323,"depth":169,"text":324},{"id":459,"depth":193,"text":460,"children":1091},[1092],{"id":627,"depth":169,"text":628},{"id":837,"depth":193,"text":838},{"id":1060,"depth":193,"text":1061},"2020-02-21T00:00:00.000Z","Learn how to add CSS background image gradients with Outlook VML fallback to your HTML email templates in Maizzle.","md",{},true,"/guides/gradients",{"title":5,"description":1096},{"loc":1100},"guides/gradients","Hs8TQhUUHQbYbufi4UhZv6LnUrIHcB_ryzxx9Fzwi00",[1106,1110],{"title":1107,"path":1108,"stem":1109,"children":-1},"Using the WordPress API to create a newsletter from your posts","/guides/wordpress-api","guides/wordpress-api",{"title":1111,"path":1112,"stem":1113,"children":-1},"How to add PrismJS syntax highlighting to HTML emails","/guides/syntax-highlighting-prismjs","guides/syntax-highlighting-prismjs",1780318597267]