[{"data":1,"prerenderedAt":1707},["ShallowReactive",2],{"guide-css-design-tips":3},{"id":4,"title":5,"body":6,"date":1699,"description":1700,"extension":1701,"meta":1702,"navigation":165,"path":1703,"readingTime":169,"seo":1704,"stem":1705,"__hash__":1706},"guides\u002Fguides\u002Fcss-design-tips.md","CSS Design Tips: Using Gradients, Shadows, and Color for Modern UIs",{"type":7,"value":8,"toc":1682},"minimark",[9,14,18,22,25,75,82,88,235,239,242,365,370,399,470,474,477,513,621,625,628,784,787,864,868,871,941,945,1111,1117,1121,1124,1150,1248,1252,1616,1620,1640,1644,1658,1662,1678],[10,11,13],"h2",{"id":12},"design-is-in-the-details","Design Is in the Details",[15,16,17],"p",{},"A polished UI does not require a design degree. Small, consistent use of gradients, shadows, and color can transform a flat wireframe into a professional interface. This guide covers practical techniques you can apply today — no Figma plugins required.",[10,19,21],{"id":20},"subtle-vs-bold-gradients","Subtle vs. Bold Gradients",[15,23,24],{},"Not every gradient needs to be a rainbow. The best UI gradients fall into two categories:",[26,27,28,44],"table",{},[29,30,31],"thead",{},[32,33,34,38,41],"tr",{},[35,36,37],"th",{},"Style",[35,39,40],{},"When to Use",[35,42,43],{},"Example",[45,46,47,62],"tbody",{},[32,48,49,53,56],{},[50,51,52],"td",{},"Subtle",[50,54,55],{},"Buttons, cards, backgrounds",[50,57,58],{},[59,60,61],"code",{},"linear-gradient(180deg, #334155, #1E293B)",[32,63,64,67,70],{},[50,65,66],{},"Bold",[50,68,69],{},"Hero sections, feature banners",[50,71,72],{},[59,73,74],{},"linear-gradient(135deg, #3B82F6, #8B5CF6)",[15,76,77,81],{},[78,79,80],"strong",{},"Subtle gradients"," shift just 5–15% in lightness. They add depth without drawing attention to themselves. Think of them as the seasoning, not the main dish.",[15,83,84,87],{},[78,85,86],{},"Bold gradients"," use contrasting hues and higher saturation. Reserve them for focal points — the one area on the page where you want all eyes to land.",[89,90,95],"pre",{"className":91,"code":92,"language":93,"meta":94,"style":94},"language-css shiki shiki-themes github-light github-dark","\u002F* Subtle card depth *\u002F\n.card {\n  background: linear-gradient(180deg, #1E293B, #0F172A);\n}\n\n\u002F* Bold hero splash *\u002F\n.hero {\n  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);\n}\n","css","",[59,96,97,106,117,154,160,167,173,181,230],{"__ignoreMap":94},[98,99,102],"span",{"class":100,"line":101},"line",1,[98,103,105],{"class":104},"sJ8bj","\u002F* Subtle card depth *\u002F\n",[98,107,109,113],{"class":100,"line":108},2,[98,110,112],{"class":111},"sScJk",".card",[98,114,116],{"class":115},"sVt8B"," {\n",[98,118,120,124,127,130,133,136,140,143,146,148,151],{"class":100,"line":119},3,[98,121,123],{"class":122},"sj4cs","  background",[98,125,126],{"class":115},": ",[98,128,129],{"class":122},"linear-gradient",[98,131,132],{"class":115},"(",[98,134,135],{"class":122},"180",[98,137,139],{"class":138},"szBVR","deg",[98,141,142],{"class":115},", ",[98,144,145],{"class":122},"#1E293B",[98,147,142],{"class":115},[98,149,150],{"class":122},"#0F172A",[98,152,153],{"class":115},");\n",[98,155,157],{"class":100,"line":156},4,[98,158,159],{"class":115},"}\n",[98,161,163],{"class":100,"line":162},5,[98,164,166],{"emptyLinePlaceholder":165},true,"\n",[98,168,170],{"class":100,"line":169},6,[98,171,172],{"class":104},"\u002F* Bold hero splash *\u002F\n",[98,174,176,179],{"class":100,"line":175},7,[98,177,178],{"class":111},".hero",[98,180,116],{"class":115},[98,182,184,186,188,190,192,195,197,199,202,205,208,210,213,216,218,220,223,226,228],{"class":100,"line":183},8,[98,185,123],{"class":122},[98,187,126],{"class":115},[98,189,129],{"class":122},[98,191,132],{"class":115},[98,193,194],{"class":122},"135",[98,196,139],{"class":138},[98,198,142],{"class":115},[98,200,201],{"class":122},"#3B82F6",[98,203,204],{"class":122}," 0",[98,206,207],{"class":138},"%",[98,209,142],{"class":115},[98,211,212],{"class":122},"#8B5CF6",[98,214,215],{"class":122}," 50",[98,217,207],{"class":138},[98,219,142],{"class":115},[98,221,222],{"class":122},"#EC4899",[98,224,225],{"class":122}," 100",[98,227,207],{"class":138},[98,229,153],{"class":115},[98,231,233],{"class":100,"line":232},9,[98,234,159],{"class":115},[10,236,238],{"id":237},"pairing-gradients-with-box-shadows","Pairing Gradients with Box Shadows",[15,240,241],{},"Gradients create surface variation. Shadows create elevation. Together they produce a convincing sense of depth.",[89,243,245],{"className":91,"code":244,"language":93,"meta":94,"style":94},".elevated-card {\n  background: linear-gradient(180deg, #1E293B, #0F172A);\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.3),\n    0 4px 12px rgba(0, 0, 0, 0.2);\n}\n",[59,246,247,254,278,286,326,361],{"__ignoreMap":94},[98,248,249,252],{"class":100,"line":101},[98,250,251],{"class":111},".elevated-card",[98,253,116],{"class":115},[98,255,256,258,260,262,264,266,268,270,272,274,276],{"class":100,"line":108},[98,257,123],{"class":122},[98,259,126],{"class":115},[98,261,129],{"class":122},[98,263,132],{"class":115},[98,265,135],{"class":122},[98,267,139],{"class":138},[98,269,142],{"class":115},[98,271,145],{"class":122},[98,273,142],{"class":115},[98,275,150],{"class":122},[98,277,153],{"class":115},[98,279,280,283],{"class":100,"line":119},[98,281,282],{"class":122},"  box-shadow",[98,284,285],{"class":115},":\n",[98,287,288,291,294,297,300,302,305,307,310,312,314,316,318,320,323],{"class":100,"line":156},[98,289,290],{"class":122},"    0",[98,292,293],{"class":122}," 1",[98,295,296],{"class":138},"px",[98,298,299],{"class":122}," 2",[98,301,296],{"class":138},[98,303,304],{"class":122}," rgba",[98,306,132],{"class":115},[98,308,309],{"class":122},"0",[98,311,142],{"class":115},[98,313,309],{"class":122},[98,315,142],{"class":115},[98,317,309],{"class":122},[98,319,142],{"class":115},[98,321,322],{"class":122},"0.3",[98,324,325],{"class":115},"),\n",[98,327,328,330,333,335,338,340,342,344,346,348,350,352,354,356,359],{"class":100,"line":162},[98,329,290],{"class":122},[98,331,332],{"class":122}," 4",[98,334,296],{"class":138},[98,336,337],{"class":122}," 12",[98,339,296],{"class":138},[98,341,304],{"class":122},[98,343,132],{"class":115},[98,345,309],{"class":122},[98,347,142],{"class":115},[98,349,309],{"class":122},[98,351,142],{"class":115},[98,353,309],{"class":122},[98,355,142],{"class":115},[98,357,358],{"class":122},"0.2",[98,360,153],{"class":115},[98,362,363],{"class":100,"line":169},[98,364,159],{"class":115},[366,367,369],"h3",{"id":368},"shadow-layering-rules","Shadow Layering Rules",[371,372,373,380,393],"ul",{},[374,375,376,379],"li",{},[78,377,378],{},"Two shadows minimum",": One tight (small offset), one diffused (larger offset)",[374,381,382,385,386,389,390],{},[78,383,384],{},"Dark mode",": Use higher alpha values — ",[59,387,388],{},"rgba(0,0,0,0.4)"," instead of ",[59,391,392],{},"rgba(0,0,0,0.1)",[374,394,395,398],{},[78,396,397],{},"Never pure black",": Real shadows carry the color of the surface they sit on",[89,400,402],{"className":91,"code":401,"language":93,"meta":94,"style":94},"\u002F* Light mode shadow *\u002F\nbox-shadow:\n  0 1px 3px rgba(0, 0, 0, 0.08),\n  0 8px 24px rgba(0, 0, 0, 0.12);\n\n\u002F* Dark mode shadow *\u002F\nbox-shadow:\n  0 1px 3px rgba(0, 0, 0, 0.4),\n  0 8px 24px rgba(0, 0, 0, 0.3);\n",[59,403,404,409,417,427,437,441,446,452,461],{"__ignoreMap":94},[98,405,406],{"class":100,"line":101},[98,407,408],{"class":104},"\u002F* Light mode shadow *\u002F\n",[98,410,411,415],{"class":100,"line":108},[98,412,414],{"class":413},"s9eBZ","box-shadow",[98,416,285],{"class":115},[98,418,419,422,425],{"class":100,"line":119},[98,420,421],{"class":115},"  0 1px 3px rgba(0, 0, 0, 0",[98,423,424],{"class":111},".08",[98,426,325],{"class":115},[98,428,429,432,435],{"class":100,"line":156},[98,430,431],{"class":115},"  0 8px 24px rgba(0, 0, 0, 0",[98,433,434],{"class":111},".12",[98,436,153],{"class":115},[98,438,439],{"class":100,"line":162},[98,440,166],{"emptyLinePlaceholder":165},[98,442,443],{"class":100,"line":169},[98,444,445],{"class":104},"\u002F* Dark mode shadow *\u002F\n",[98,447,448,450],{"class":100,"line":175},[98,449,414],{"class":413},[98,451,285],{"class":115},[98,453,454,456,459],{"class":100,"line":183},[98,455,421],{"class":115},[98,457,458],{"class":111},".4",[98,460,325],{"class":115},[98,462,463,465,468],{"class":100,"line":232},[98,464,431],{"class":115},[98,466,467],{"class":111},".3",[98,469,153],{"class":115},[10,471,473],{"id":472},"dark-mode-gradients","Dark Mode Gradients",[15,475,476],{},"Dark backgrounds reveal flaws that light backgrounds hide. Follow these rules:",[478,479,480,495,501,507],"ol",{},[374,481,482,485,486,488,489,389,492],{},[78,483,484],{},"Never go pure black"," — Use ",[59,487,150],{}," or ",[59,490,491],{},"#121212",[59,493,494],{},"#000000",[374,496,497,500],{},[78,498,499],{},"Lighten gradient stops"," — Colors need more lightness to read well on dark surfaces",[374,502,503,506],{},[78,504,505],{},"Reduce saturation"," — Colors appear more vivid on dark backgrounds; tone them down 10–20%",[374,508,509,512],{},[78,510,511],{},"Test contrast"," — Verify all text meets WCAG AA (4.5:1 for body text)",[89,514,516],{"className":91,"code":515,"language":93,"meta":94,"style":94},":root {\n  --surface: #0F172A;\n  --surface-raised: #1E293B;\n}\n\n.dark-card {\n  background: linear-gradient(180deg, var(--surface-raised), var(--surface));\n  color: #E2E8F0; \u002F* Contrast: 12.3:1 ✓ *\u002F\n}\n",[59,517,518,525,538,549,553,557,564,601,617],{"__ignoreMap":94},[98,519,520,523],{"class":100,"line":101},[98,521,522],{"class":111},":root",[98,524,116],{"class":115},[98,526,527,531,533,535],{"class":100,"line":108},[98,528,530],{"class":529},"s4XuR","  --surface",[98,532,126],{"class":115},[98,534,150],{"class":122},[98,536,537],{"class":115},";\n",[98,539,540,543,545,547],{"class":100,"line":119},[98,541,542],{"class":529},"  --surface-raised",[98,544,126],{"class":115},[98,546,145],{"class":122},[98,548,537],{"class":115},[98,550,551],{"class":100,"line":156},[98,552,159],{"class":115},[98,554,555],{"class":100,"line":162},[98,556,166],{"emptyLinePlaceholder":165},[98,558,559,562],{"class":100,"line":169},[98,560,561],{"class":111},".dark-card",[98,563,116],{"class":115},[98,565,566,568,570,572,574,576,578,580,583,585,588,591,593,595,598],{"class":100,"line":175},[98,567,123],{"class":122},[98,569,126],{"class":115},[98,571,129],{"class":122},[98,573,132],{"class":115},[98,575,135],{"class":122},[98,577,139],{"class":138},[98,579,142],{"class":115},[98,581,582],{"class":122},"var",[98,584,132],{"class":115},[98,586,587],{"class":529},"--surface-raised",[98,589,590],{"class":115},"), ",[98,592,582],{"class":122},[98,594,132],{"class":115},[98,596,597],{"class":529},"--surface",[98,599,600],{"class":115},"));\n",[98,602,603,606,608,611,614],{"class":100,"line":183},[98,604,605],{"class":122},"  color",[98,607,126],{"class":115},[98,609,610],{"class":122},"#E2E8F0",[98,612,613],{"class":115},"; ",[98,615,616],{"class":104},"\u002F* Contrast: 12.3:1 ✓ *\u002F\n",[98,618,619],{"class":100,"line":232},[98,620,159],{"class":115},[10,622,624],{"id":623},"css-variables-for-gradient-systems","CSS Variables for Gradient Systems",[15,626,627],{},"Hardcoding gradient values across a codebase creates maintenance headaches. Use CSS custom properties to define gradient palettes once.",[89,629,631],{"className":91,"code":630,"language":93,"meta":94,"style":94},":root {\n  --grad-primary: linear-gradient(135deg, #3B82F6, #8B5CF6);\n  --grad-surface: linear-gradient(180deg, #1E293B, #0F172A);\n  --grad-accent: linear-gradient(135deg, #F59E0B, #EF4444);\n}\n\n.btn-primary {\n  background: var(--grad-primary);\n}\n\n.hero-banner {\n  background: var(--grad-accent);\n}\n",[59,632,633,639,664,689,716,720,724,731,746,750,755,763,779],{"__ignoreMap":94},[98,634,635,637],{"class":100,"line":101},[98,636,522],{"class":111},[98,638,116],{"class":115},[98,640,641,644,646,648,650,652,654,656,658,660,662],{"class":100,"line":108},[98,642,643],{"class":529},"  --grad-primary",[98,645,126],{"class":115},[98,647,129],{"class":122},[98,649,132],{"class":115},[98,651,194],{"class":122},[98,653,139],{"class":138},[98,655,142],{"class":115},[98,657,201],{"class":122},[98,659,142],{"class":115},[98,661,212],{"class":122},[98,663,153],{"class":115},[98,665,666,669,671,673,675,677,679,681,683,685,687],{"class":100,"line":119},[98,667,668],{"class":529},"  --grad-surface",[98,670,126],{"class":115},[98,672,129],{"class":122},[98,674,132],{"class":115},[98,676,135],{"class":122},[98,678,139],{"class":138},[98,680,142],{"class":115},[98,682,145],{"class":122},[98,684,142],{"class":115},[98,686,150],{"class":122},[98,688,153],{"class":115},[98,690,691,694,696,698,700,702,704,706,709,711,714],{"class":100,"line":156},[98,692,693],{"class":529},"  --grad-accent",[98,695,126],{"class":115},[98,697,129],{"class":122},[98,699,132],{"class":115},[98,701,194],{"class":122},[98,703,139],{"class":138},[98,705,142],{"class":115},[98,707,708],{"class":122},"#F59E0B",[98,710,142],{"class":115},[98,712,713],{"class":122},"#EF4444",[98,715,153],{"class":115},[98,717,718],{"class":100,"line":162},[98,719,159],{"class":115},[98,721,722],{"class":100,"line":169},[98,723,166],{"emptyLinePlaceholder":165},[98,725,726,729],{"class":100,"line":175},[98,727,728],{"class":111},".btn-primary",[98,730,116],{"class":115},[98,732,733,735,737,739,741,744],{"class":100,"line":183},[98,734,123],{"class":122},[98,736,126],{"class":115},[98,738,582],{"class":122},[98,740,132],{"class":115},[98,742,743],{"class":529},"--grad-primary",[98,745,153],{"class":115},[98,747,748],{"class":100,"line":232},[98,749,159],{"class":115},[98,751,753],{"class":100,"line":752},10,[98,754,166],{"emptyLinePlaceholder":165},[98,756,758,761],{"class":100,"line":757},11,[98,759,760],{"class":111},".hero-banner",[98,762,116],{"class":115},[98,764,766,768,770,772,774,777],{"class":100,"line":765},12,[98,767,123],{"class":122},[98,769,126],{"class":115},[98,771,582],{"class":122},[98,773,132],{"class":115},[98,775,776],{"class":529},"--grad-accent",[98,778,153],{"class":115},[98,780,782],{"class":100,"line":781},13,[98,783,159],{"class":115},[15,785,786],{},"Change the variable once, and every component updates. This is especially useful for theming and dark\u002Flight mode toggles.",[89,788,790],{"className":91,"code":789,"language":93,"meta":94,"style":94},"[data-theme=\"dark\"] {\n  --grad-surface: linear-gradient(180deg, #1E293B, #0F172A);\n  --grad-primary: linear-gradient(135deg, #60A5FA, #A78BFA);\n}\n",[59,791,792,810,834,860],{"__ignoreMap":94},[98,793,794,797,800,803,807],{"class":100,"line":101},[98,795,796],{"class":115},"[",[98,798,799],{"class":111},"data-theme",[98,801,802],{"class":138},"=",[98,804,806],{"class":805},"sZZnC","\"dark\"",[98,808,809],{"class":115},"] {\n",[98,811,812,814,816,818,820,822,824,826,828,830,832],{"class":100,"line":108},[98,813,668],{"class":529},[98,815,126],{"class":115},[98,817,129],{"class":122},[98,819,132],{"class":115},[98,821,135],{"class":122},[98,823,139],{"class":138},[98,825,142],{"class":115},[98,827,145],{"class":122},[98,829,142],{"class":115},[98,831,150],{"class":122},[98,833,153],{"class":115},[98,835,836,838,840,842,844,846,848,850,853,855,858],{"class":100,"line":119},[98,837,643],{"class":529},[98,839,126],{"class":115},[98,841,129],{"class":122},[98,843,132],{"class":115},[98,845,194],{"class":122},[98,847,139],{"class":138},[98,849,142],{"class":115},[98,851,852],{"class":122},"#60A5FA",[98,854,142],{"class":115},[98,856,857],{"class":122},"#A78BFA",[98,859,153],{"class":115},[98,861,862],{"class":100,"line":156},[98,863,159],{"class":115},[10,865,867],{"id":866},"performance-notes","Performance Notes",[15,869,870],{},"Gradients are cheap — most of the time. A few things to watch:",[26,872,873,886],{},[29,874,875],{},[32,876,877,880,883],{},[35,878,879],{},"Concern",[35,881,882],{},"Impact",[35,884,885],{},"Recommendation",[45,887,888,899,918,929],{},[32,889,890,893,896],{},[50,891,892],{},"Gradient repaint on scroll",[50,894,895],{},"Low",[50,897,898],{},"Browsers cache rasterized gradients",[32,900,901,904,907],{},[50,902,903],{},"Animated gradient angles",[50,905,906],{},"Medium",[50,908,909,910,913,914,917],{},"Use ",[59,911,912],{},"@property"," for smooth animations; avoid ",[59,915,916],{},"background-size"," tricks",[32,919,920,923,926],{},[50,921,922],{},"Many overlapping gradients",[50,924,925],{},"High",[50,927,928],{},"Each layer is composited; keep layers under 3",[32,930,931,936,938],{},[50,932,933],{},[59,934,935],{},"will-change: background",[50,937,895],{},[50,939,940],{},"Only add if you are animating the gradient",[366,942,944],{"id":943},"smooth-gradient-animation","Smooth Gradient Animation",[89,946,948],{"className":91,"code":947,"language":93,"meta":94,"style":94},"@property --angle {\n  syntax: '\u003Cangle>';\n  initial-value: 0deg;\n  inherits: false;\n}\n\n.animated-border {\n  --angle: 0deg;\n  background: conic-gradient(from var(--angle), #3B82F6, #8B5CF6, #3B82F6);\n  animation: rotate 3s linear infinite;\n}\n\n@keyframes rotate {\n  to { --angle: 360deg; }\n}\n",[59,949,950,957,968,976,981,985,989,996,1009,1045,1067,1071,1075,1085,1106],{"__ignoreMap":94},[98,951,952,954],{"class":100,"line":101},[98,953,912],{"class":138},[98,955,956],{"class":115}," --angle {\n",[98,958,959,962,965],{"class":100,"line":108},[98,960,961],{"class":115},"  syntax: '\u003Cangle",[98,963,964],{"class":138},">",[98,966,967],{"class":115},"';\n",[98,969,970,973],{"class":100,"line":119},[98,971,972],{"class":413},"  initial-value",[98,974,975],{"class":115},": 0deg;\n",[98,977,978],{"class":100,"line":156},[98,979,980],{"class":115},"  inherits: false;\n",[98,982,983],{"class":100,"line":162},[98,984,159],{"class":115},[98,986,987],{"class":100,"line":169},[98,988,166],{"emptyLinePlaceholder":165},[98,990,991,994],{"class":100,"line":175},[98,992,993],{"class":111},".animated-border",[98,995,116],{"class":115},[98,997,998,1001,1003,1005,1007],{"class":100,"line":183},[98,999,1000],{"class":529},"  --angle",[98,1002,126],{"class":115},[98,1004,309],{"class":122},[98,1006,139],{"class":138},[98,1008,537],{"class":115},[98,1010,1011,1013,1015,1018,1020,1023,1026,1028,1031,1033,1035,1037,1039,1041,1043],{"class":100,"line":232},[98,1012,123],{"class":122},[98,1014,126],{"class":115},[98,1016,1017],{"class":122},"conic-gradient",[98,1019,132],{"class":115},[98,1021,1022],{"class":138},"from",[98,1024,1025],{"class":122}," var",[98,1027,132],{"class":115},[98,1029,1030],{"class":529},"--angle",[98,1032,590],{"class":115},[98,1034,201],{"class":122},[98,1036,142],{"class":115},[98,1038,212],{"class":122},[98,1040,142],{"class":115},[98,1042,201],{"class":122},[98,1044,153],{"class":115},[98,1046,1047,1050,1053,1056,1059,1062,1065],{"class":100,"line":752},[98,1048,1049],{"class":122},"  animation",[98,1051,1052],{"class":115},": rotate ",[98,1054,1055],{"class":122},"3",[98,1057,1058],{"class":138},"s",[98,1060,1061],{"class":122}," linear",[98,1063,1064],{"class":122}," infinite",[98,1066,537],{"class":115},[98,1068,1069],{"class":100,"line":757},[98,1070,159],{"class":115},[98,1072,1073],{"class":100,"line":765},[98,1074,166],{"emptyLinePlaceholder":165},[98,1076,1077,1080,1083],{"class":100,"line":781},[98,1078,1079],{"class":138},"@keyframes",[98,1081,1082],{"class":529}," rotate",[98,1084,116],{"class":115},[98,1086,1088,1091,1094,1096,1098,1101,1103],{"class":100,"line":1087},14,[98,1089,1090],{"class":111},"  to",[98,1092,1093],{"class":115}," { ",[98,1095,1030],{"class":529},[98,1097,126],{"class":115},[98,1099,1100],{"class":122},"360",[98,1102,139],{"class":138},[98,1104,1105],{"class":115},"; }\n",[98,1107,1109],{"class":100,"line":1108},15,[98,1110,159],{"class":115},[15,1112,1113,1114,1116],{},"The ",[59,1115,912],{}," rule lets the browser interpolate angle values smoothly, producing a clean rotation without janky steps.",[10,1118,1120],{"id":1119},"accessibility-checklist","Accessibility Checklist",[15,1122,1123],{},"Beautiful gradients mean nothing if users cannot read the content on top of them.",[371,1125,1126,1132,1138,1144],{},[374,1127,1128,1131],{},[78,1129,1130],{},"Check text contrast",": Every color stop that sits behind text must meet WCAG AA (4.5:1)",[374,1133,1134,1137],{},[78,1135,1136],{},"Never convey meaning by color alone",": Pair gradient indicators with text or icons",[374,1139,1140,1143],{},[78,1141,1142],{},"Test in both modes",": A gradient that passes contrast in light mode may fail in dark mode",[374,1145,1146,1149],{},[78,1147,1148],{},"Simulate color blindness",": Use browser DevTools vision simulation",[89,1151,1153],{"className":91,"code":1152,"language":93,"meta":94,"style":94},"\u002F* Safe overlay gradient for text *\u002F\n.hero-overlay {\n  background: linear-gradient(\n    to bottom,\n    transparent 0%,\n    rgba(15, 23, 42, 0.85) 100%\n  );\n  \u002F* Ensures bottom text area has high contrast *\u002F\n}\n",[59,1154,1155,1160,1167,1178,1189,1200,1234,1239,1244],{"__ignoreMap":94},[98,1156,1157],{"class":100,"line":101},[98,1158,1159],{"class":104},"\u002F* Safe overlay gradient for text *\u002F\n",[98,1161,1162,1165],{"class":100,"line":108},[98,1163,1164],{"class":111},".hero-overlay",[98,1166,116],{"class":115},[98,1168,1169,1171,1173,1175],{"class":100,"line":119},[98,1170,123],{"class":122},[98,1172,126],{"class":115},[98,1174,129],{"class":122},[98,1176,1177],{"class":115},"(\n",[98,1179,1180,1183,1186],{"class":100,"line":156},[98,1181,1182],{"class":138},"    to",[98,1184,1185],{"class":122}," bottom",[98,1187,1188],{"class":115},",\n",[98,1190,1191,1194,1196,1198],{"class":100,"line":162},[98,1192,1193],{"class":122},"    transparent",[98,1195,204],{"class":122},[98,1197,207],{"class":138},[98,1199,1188],{"class":115},[98,1201,1202,1205,1207,1210,1212,1215,1217,1220,1222,1225,1228,1231],{"class":100,"line":169},[98,1203,1204],{"class":122},"    rgba",[98,1206,132],{"class":115},[98,1208,1209],{"class":122},"15",[98,1211,142],{"class":115},[98,1213,1214],{"class":122},"23",[98,1216,142],{"class":115},[98,1218,1219],{"class":122},"42",[98,1221,142],{"class":115},[98,1223,1224],{"class":122},"0.85",[98,1226,1227],{"class":115},") ",[98,1229,1230],{"class":122},"100",[98,1232,1233],{"class":138},"%\n",[98,1235,1236],{"class":100,"line":175},[98,1237,1238],{"class":115},"  );\n",[98,1240,1241],{"class":100,"line":183},[98,1242,1243],{"class":104},"  \u002F* Ensures bottom text area has high contrast *\u002F\n",[98,1245,1246],{"class":100,"line":232},[98,1247,159],{"class":115},[10,1249,1251],{"id":1250},"_10-practical-css-gradient-recipes","10 Practical CSS Gradient Recipes",[478,1253,1254,1288,1322,1356,1379,1403,1444,1476,1496,1561],{},[374,1255,1256,1259],{},[78,1257,1258],{},"Glass morphism surface",[89,1260,1262],{"className":91,"code":1261,"language":93,"meta":94,"style":94},"background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\nbackdrop-filter: blur(10px);\n",[59,1263,1264,1280],{"__ignoreMap":94},[98,1265,1266,1269,1272,1275,1278],{"class":100,"line":101},[98,1267,1268],{"class":115},"background: linear-gradient(135deg, rgba(255,255,255,0",[98,1270,1271],{"class":111},".1",[98,1273,1274],{"class":115},"), rgba(255,255,255,0",[98,1276,1277],{"class":111},".05",[98,1279,600],{"class":115},[98,1281,1282,1285],{"class":100,"line":108},[98,1283,1284],{"class":413},"backdrop-filter",[98,1286,1287],{"class":115},": blur(10px);\n",[374,1289,1290,1293],{},[78,1291,1292],{},"Warm button glow",[89,1294,1296],{"className":91,"code":1295,"language":93,"meta":94,"style":94},"background: linear-gradient(135deg, #F59E0B, #EF4444);\nbox-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);\n",[59,1297,1298,1311],{"__ignoreMap":94},[98,1299,1300,1303,1305,1307,1309],{"class":100,"line":101},[98,1301,1302],{"class":115},"background: linear-gradient(135deg, ",[98,1304,708],{"class":111},[98,1306,142],{"class":115},[98,1308,713],{"class":111},[98,1310,153],{"class":115},[98,1312,1313,1315,1318,1320],{"class":100,"line":108},[98,1314,414],{"class":413},[98,1316,1317],{"class":115},": 0 4px 14px rgba(239, 68, 68, 0",[98,1319,458],{"class":111},[98,1321,153],{"class":115},[374,1323,1324,1327],{},[78,1325,1326],{},"Cool button glow",[89,1328,1330],{"className":91,"code":1329,"language":93,"meta":94,"style":94},"background: linear-gradient(135deg, #3B82F6, #8B5CF6);\nbox-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);\n",[59,1331,1332,1345],{"__ignoreMap":94},[98,1333,1334,1336,1339,1341,1343],{"class":100,"line":101},[98,1335,1302],{"class":115},[98,1337,201],{"class":1338},"s7hpK",[98,1340,142],{"class":115},[98,1342,212],{"class":1338},[98,1344,153],{"class":115},[98,1346,1347,1349,1352,1354],{"class":100,"line":108},[98,1348,414],{"class":413},[98,1350,1351],{"class":115},": 0 4px 14px rgba(59, 130, 246, 0",[98,1353,458],{"class":111},[98,1355,153],{"class":115},[374,1357,1358,1361],{},[78,1359,1360],{},"Dark elevated card",[89,1362,1364],{"className":91,"code":1363,"language":93,"meta":94,"style":94},"background: linear-gradient(180deg, #1E293B, #0F172A);\n",[59,1365,1366],{"__ignoreMap":94},[98,1367,1368,1371,1373,1375,1377],{"class":100,"line":101},[98,1369,1370],{"class":115},"background: linear-gradient(180deg, ",[98,1372,145],{"class":1338},[98,1374,142],{"class":115},[98,1376,150],{"class":1338},[98,1378,153],{"class":115},[374,1380,1381,1384],{},[78,1382,1383],{},"Subtle warm shift",[89,1385,1387],{"className":91,"code":1386,"language":93,"meta":94,"style":94},"background: linear-gradient(180deg, #FEF3C7, #FDE68A);\n",[59,1388,1389],{"__ignoreMap":94},[98,1390,1391,1393,1396,1398,1401],{"class":100,"line":101},[98,1392,1370],{"class":115},[98,1394,1395],{"class":111},"#FEF3C7",[98,1397,142],{"class":115},[98,1399,1400],{"class":111},"#FDE68A",[98,1402,153],{"class":115},[374,1404,1405,1408],{},[78,1406,1407],{},"Mesh-like blend",[89,1409,1411],{"className":91,"code":1410,"language":93,"meta":94,"style":94},"background:\n  radial-gradient(at 20% 80%, rgba(59,130,246,0.3), transparent 50%),\n  radial-gradient(at 80% 20%, rgba(139,92,246,0.3), transparent 50%),\n  #0F172A;\n",[59,1412,1413,1418,1428,1437],{"__ignoreMap":94},[98,1414,1415],{"class":100,"line":101},[98,1416,1417],{"class":115},"background:\n",[98,1419,1420,1423,1425],{"class":100,"line":108},[98,1421,1422],{"class":115},"  radial-gradient(at 20% 80%, rgba(59,130,246,0",[98,1424,467],{"class":111},[98,1426,1427],{"class":115},"), transparent 50%),\n",[98,1429,1430,1433,1435],{"class":100,"line":119},[98,1431,1432],{"class":115},"  radial-gradient(at 80% 20%, rgba(139,92,246,0",[98,1434,467],{"class":111},[98,1436,1427],{"class":115},[98,1438,1439,1442],{"class":100,"line":156},[98,1440,1441],{"class":1338},"  #0F172A",[98,1443,537],{"class":115},[374,1445,1446,1449],{},[78,1447,1448],{},"Text gradient",[89,1450,1452],{"className":91,"code":1451,"language":93,"meta":94,"style":94},"background: linear-gradient(135deg, #3B82F6, #8B5CF6);\n-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\n",[59,1453,1454,1466,1471],{"__ignoreMap":94},[98,1455,1456,1458,1460,1462,1464],{"class":100,"line":101},[98,1457,1302],{"class":115},[98,1459,201],{"class":1338},[98,1461,142],{"class":115},[98,1463,212],{"class":1338},[98,1465,153],{"class":115},[98,1467,1468],{"class":100,"line":108},[98,1469,1470],{"class":115},"-webkit-background-clip: text;\n",[98,1472,1473],{"class":100,"line":119},[98,1474,1475],{"class":115},"-webkit-text-fill-color: transparent;\n",[374,1477,1478,1481],{},[78,1479,1480],{},"Horizon glow",[89,1482,1484],{"className":91,"code":1483,"language":93,"meta":94,"style":94},"background: linear-gradient(to top, #3B82F6, transparent 60%);\n",[59,1485,1486],{"__ignoreMap":94},[98,1487,1488,1491,1493],{"class":100,"line":101},[98,1489,1490],{"class":115},"background: linear-gradient(to top, ",[98,1492,201],{"class":1338},[98,1494,1495],{"class":115},", transparent 60%);\n",[374,1497,1498,1501],{},[78,1499,1500],{},"Shimmer loading effect",[89,1502,1504],{"className":91,"code":1503,"language":93,"meta":94,"style":94},"background: linear-gradient(\n  90deg,\n  #1E293B 25%,\n  #334155 50%,\n  #1E293B 75%\n);\nbackground-size: 200% 100%;\nanimation: shimmer 1.5s infinite;\n",[59,1505,1506,1511,1516,1524,1532,1539,1543,1550],{"__ignoreMap":94},[98,1507,1508],{"class":100,"line":101},[98,1509,1510],{"class":115},"background: linear-gradient(\n",[98,1512,1513],{"class":100,"line":108},[98,1514,1515],{"class":115},"  90deg,\n",[98,1517,1518,1521],{"class":100,"line":119},[98,1519,1520],{"class":1338},"  #1E293B",[98,1522,1523],{"class":115}," 25%,\n",[98,1525,1526,1529],{"class":100,"line":156},[98,1527,1528],{"class":1338},"  #334155",[98,1530,1531],{"class":115}," 50%,\n",[98,1533,1534,1536],{"class":100,"line":162},[98,1535,1520],{"class":1338},[98,1537,1538],{"class":115}," 75%\n",[98,1540,1541],{"class":100,"line":169},[98,1542,153],{"class":115},[98,1544,1545,1547],{"class":100,"line":175},[98,1546,916],{"class":413},[98,1548,1549],{"class":115},": 200% 100%;\n",[98,1551,1552,1555,1558],{"class":100,"line":183},[98,1553,1554],{"class":115},"animation: shimmer 1",[98,1556,1557],{"class":111},".5s",[98,1559,1560],{"class":115}," infinite;\n",[374,1562,1563,1566],{},[78,1564,1565],{},"Gradient border",[89,1567,1569],{"className":91,"code":1568,"language":93,"meta":94,"style":94},"border: 2px solid transparent;\nbackground:\n  linear-gradient(#0F172A, #0F172A) padding-box,\n  linear-gradient(135deg, #3B82F6, #8B5CF6) border-box;\n",[59,1570,1571,1576,1580,1598],{"__ignoreMap":94},[98,1572,1573],{"class":100,"line":101},[98,1574,1575],{"class":115},"border: 2px solid transparent;\n",[98,1577,1578],{"class":100,"line":108},[98,1579,1417],{"class":115},[98,1581,1582,1585,1587,1589,1591,1593,1596],{"class":100,"line":119},[98,1583,1584],{"class":115},"  linear-gradient(",[98,1586,150],{"class":1338},[98,1588,142],{"class":115},[98,1590,150],{"class":1338},[98,1592,1227],{"class":115},[98,1594,1595],{"class":413},"padding-box",[98,1597,1188],{"class":115},[98,1599,1600,1603,1605,1607,1609,1611,1614],{"class":100,"line":156},[98,1601,1602],{"class":115},"  linear-gradient(135deg, ",[98,1604,201],{"class":1338},[98,1606,142],{"class":115},[98,1608,212],{"class":1338},[98,1610,1227],{"class":115},[98,1612,1613],{"class":413},"border-box",[98,1615,537],{"class":115},[10,1617,1619],{"id":1618},"key-takeaways","Key Takeaways",[371,1621,1622,1625,1628,1631,1634,1637],{},[374,1623,1624],{},"Subtle gradients (5–15% lightness shift) add depth without distraction",[374,1626,1627],{},"Layer two box shadows — one tight, one diffused — for realistic elevation",[374,1629,1630],{},"Dark mode needs lighter gradient stops and reduced saturation",[374,1632,1633],{},"Define gradients as CSS variables to keep your system maintainable",[374,1635,1636],{},"Always verify text contrast against every stop in the gradient",[374,1638,1639],{},"Keep gradient layers under 3 to avoid compositing performance hits",[10,1641,1643],{"id":1642},"try-it-yourself","Try It Yourself",[15,1645,1646,1647,1652,1653,1657],{},"Build and preview gradients interactively with our ",[1648,1649,1651],"a",{"href":1650},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",". Convert colors for your gradient stops using the ",[1648,1654,1656],{"href":1655},"\u002Ftools\u002Fcolor-converter","Color Converter"," — it handles HEX, RGB, and HSL in one click.",[10,1659,1661],{"id":1660},"related-guides","Related Guides",[371,1663,1664,1671],{},[374,1665,1666,1670],{},[1648,1667,1669],{"href":1668},"\u002Fguides\u002Fcss-gradient-guide","CSS Gradient Guide"," — Full overview of linear, radial, and conic gradients",[374,1672,1673,1677],{},[1648,1674,1676],{"href":1675},"\u002Fguides\u002Fcss-linear-gradient-tutorial","CSS Linear Gradient Tutorial"," — Deep dive into angles, directions, and advanced stop techniques",[1679,1680,1681],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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}",{"title":94,"searchDepth":108,"depth":108,"links":1683},[1684,1685,1686,1689,1690,1691,1694,1695,1696,1697,1698],{"id":12,"depth":108,"text":13},{"id":20,"depth":108,"text":21},{"id":237,"depth":108,"text":238,"children":1687},[1688],{"id":368,"depth":119,"text":369},{"id":472,"depth":108,"text":473},{"id":623,"depth":108,"text":624},{"id":866,"depth":108,"text":867,"children":1692},[1693],{"id":943,"depth":119,"text":944},{"id":1119,"depth":108,"text":1120},{"id":1250,"depth":108,"text":1251},{"id":1618,"depth":108,"text":1619},{"id":1642,"depth":108,"text":1643},{"id":1660,"depth":108,"text":1661},"2026-05-28","Practical CSS design techniques using gradients, box shadows, and color theory to create polished, professional web interfaces.","md",{"immutable":165},"\u002Fguides\u002Fcss-design-tips",{"title":5,"description":1700},"guides\u002Fcss-design-tips","20FItqBtwnN_KlScdgO4sYAO_mg32x8LYNRvJ3wkfOQ",1780401326474]