[{"data":1,"prerenderedAt":1976},["ShallowReactive",2],{"guide-css-blob-shapes":3},{"id":4,"title":5,"body":6,"date":1968,"description":1969,"extension":1970,"meta":1971,"navigation":866,"path":1972,"readingTime":379,"seo":1973,"stem":1974,"__hash__":1975},"guides\u002Fguides\u002Fcss-blob-shapes.md","CSS Blob Shapes with Border Radius",{"type":7,"value":8,"toc":1945},"minimark",[9,14,23,29,33,44,126,129,132,137,193,271,275,279,382,386,482,486,583,587,683,686,690,697,963,967,974,1160,1164,1168,1295,1299,1401,1405,1581,1585,1588,1724,1727,1897,1901,1924,1928,1931,1941],[10,11,13],"h2",{"id":12},"what-are-css-blobs","What Are CSS Blobs?",[15,16,17,18,22],"p",{},"Blobs are organic, amorphous shapes that break away from the rigid rectangles of traditional web layouts. They add visual softness and movement to backgrounds, hero sections, and decorative elements. Think lava lamp blobs, ink drops, or melting shapes — all created purely with CSS ",[19,20,21],"code",{},"border-radius",".",[15,24,25,26,28],{},"The secret to blob shapes lies in the eight-value syntax of ",[19,27,21],{},", which lets you control each corner's horizontal and vertical radius independently.",[10,30,32],{"id":31},"the-eight-value-syntax","The Eight-Value Syntax",[15,34,35,36,39,40,43],{},"Most developers know the shorthand ",[19,37,38],{},"border-radius: 10px"," (all corners) or ",[19,41,42],{},"border-radius: 10px 20px 10px 20px"," (one value per corner). But the full syntax uses a slash to separate horizontal from vertical radii:",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-css shiki shiki-themes github-light github-dark",".blob {\n  border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n}\n","css","",[19,52,53,66,120],{"__ignoreMap":50},[54,55,58,62],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"sScJk",".blob",[54,63,65],{"class":64},"sVt8B"," {\n",[54,67,69,73,76,79,83,86,88,91,93,96,98,101,103,105,107,109,111,113,115,117],{"class":56,"line":68},2,[54,70,72],{"class":71},"sj4cs","  border-radius",[54,74,75],{"class":64},": ",[54,77,78],{"class":71},"60",[54,80,82],{"class":81},"szBVR","%",[54,84,85],{"class":71}," 40",[54,87,82],{"class":81},[54,89,90],{"class":71}," 30",[54,92,82],{"class":81},[54,94,95],{"class":71}," 70",[54,97,82],{"class":81},[54,99,100],{"class":64}," \u002F ",[54,102,78],{"class":71},[54,104,82],{"class":81},[54,106,90],{"class":71},[54,108,82],{"class":81},[54,110,95],{"class":71},[54,112,82],{"class":81},[54,114,85],{"class":71},[54,116,82],{"class":81},[54,118,119],{"class":64},";\n",[54,121,123],{"class":56,"line":122},3,[54,124,125],{"class":64},"}\n",[15,127,128],{},"The values before the slash set horizontal radii for top-left, top-right, bottom-right, and bottom-left. The values after the slash set the vertical radii for the same corners.",[15,130,131],{},"When horizontal and vertical radii differ at the same corner, the browser draws an elliptical arc instead of a circular one. This asymmetry is what produces the organic blob effect.",[133,134,136],"h3",{"id":135},"understanding-the-mapping","Understanding the Mapping",[45,138,140],{"className":47,"code":139,"language":49,"meta":50,"style":50},"border-radius: [TL-h] [TR-h] [BR-h] [BL-h] \u002F [TL-v] [TR-v] [BR-v] [BL-v];\n",[19,141,142],{"__ignoreMap":50},[54,143,144,147,150,153,156,159,161,164,166,169,172,175,177,180,182,185,187,190],{"class":56,"line":57},[54,145,21],{"class":146},"s9eBZ",[54,148,149],{"class":64},": [",[54,151,152],{"class":60},"TL-h",[54,154,155],{"class":64},"] [",[54,157,158],{"class":60},"TR-h",[54,160,155],{"class":64},[54,162,163],{"class":60},"BR-h",[54,165,155],{"class":64},[54,167,168],{"class":60},"BL-h",[54,170,171],{"class":64},"] \u002F [",[54,173,174],{"class":60},"TL-v",[54,176,155],{"class":64},[54,178,179],{"class":60},"TR-v",[54,181,155],{"class":64},[54,183,184],{"class":60},"BR-v",[54,186,155],{"class":64},[54,188,189],{"class":60},"BL-v",[54,191,192],{"class":64},"];\n",[194,195,196,215],"table",{},[197,198,199],"thead",{},[200,201,202,206,209,212],"tr",{},[203,204,205],"th",{},"Position",[203,207,208],{},"Horizontal",[203,210,211],{},"Vertical",[203,213,214],{},"Effect",[216,217,218,232,246,259],"tbody",{},[200,219,220,224,227,229],{},[221,222,223],"td",{},"Top-left",[221,225,226],{},"60%",[221,228,226],{},[221,230,231],{},"Balanced curve",[200,233,234,237,240,243],{},[221,235,236],{},"Top-right",[221,238,239],{},"40%",[221,241,242],{},"30%",[221,244,245],{},"Sharper inward curve",[200,247,248,251,253,256],{},[221,249,250],{},"Bottom-right",[221,252,242],{},[221,254,255],{},"70%",[221,257,258],{},"Wide, sweeping curve",[200,260,261,264,266,268],{},[221,262,263],{},"Bottom-left",[221,265,255],{},[221,267,239],{},[221,269,270],{},"Moderate outward curve",[10,272,274],{"id":273},"creating-blob-variations","Creating Blob Variations",[133,276,278],{"id":277},"soft-blob","Soft Blob",[45,280,282],{"className":47,"code":281,"language":49,"meta":50,"style":50},".blob-soft {\n  width: 300px;\n  height: 300px;\n  border-radius: 60% 40% 70% 30% \u002F 50% 60% 40% 60%;\n  background: #a78bfa;\n}\n",[19,283,284,291,306,319,364,377],{"__ignoreMap":50},[54,285,286,289],{"class":56,"line":57},[54,287,288],{"class":60},".blob-soft",[54,290,65],{"class":64},[54,292,293,296,298,301,304],{"class":56,"line":68},[54,294,295],{"class":71},"  width",[54,297,75],{"class":64},[54,299,300],{"class":71},"300",[54,302,303],{"class":81},"px",[54,305,119],{"class":64},[54,307,308,311,313,315,317],{"class":56,"line":122},[54,309,310],{"class":71},"  height",[54,312,75],{"class":64},[54,314,300],{"class":71},[54,316,303],{"class":81},[54,318,119],{"class":64},[54,320,322,324,326,328,330,332,334,336,338,340,342,344,347,349,352,354,356,358,360,362],{"class":56,"line":321},4,[54,323,72],{"class":71},[54,325,75],{"class":64},[54,327,78],{"class":71},[54,329,82],{"class":81},[54,331,85],{"class":71},[54,333,82],{"class":81},[54,335,95],{"class":71},[54,337,82],{"class":81},[54,339,90],{"class":71},[54,341,82],{"class":81},[54,343,100],{"class":64},[54,345,346],{"class":71},"50",[54,348,82],{"class":81},[54,350,351],{"class":71}," 60",[54,353,82],{"class":81},[54,355,85],{"class":71},[54,357,82],{"class":81},[54,359,351],{"class":71},[54,361,82],{"class":81},[54,363,119],{"class":64},[54,365,367,370,372,375],{"class":56,"line":366},5,[54,368,369],{"class":71},"  background",[54,371,75],{"class":64},[54,373,374],{"class":71},"#a78bfa",[54,376,119],{"class":64},[54,378,380],{"class":56,"line":379},6,[54,381,125],{"class":64},[133,383,385],{"id":384},"stretched-blob","Stretched Blob",[45,387,389],{"className":47,"code":388,"language":49,"meta":50,"style":50},".blob-stretched {\n  width: 400px;\n  height: 250px;\n  border-radius: 50% 60% 40% 70% \u002F 60% 40% 70% 50%;\n  background: #34d399;\n}\n",[19,390,391,398,411,424,467,478],{"__ignoreMap":50},[54,392,393,396],{"class":56,"line":57},[54,394,395],{"class":60},".blob-stretched",[54,397,65],{"class":64},[54,399,400,402,404,407,409],{"class":56,"line":68},[54,401,295],{"class":71},[54,403,75],{"class":64},[54,405,406],{"class":71},"400",[54,408,303],{"class":81},[54,410,119],{"class":64},[54,412,413,415,417,420,422],{"class":56,"line":122},[54,414,310],{"class":71},[54,416,75],{"class":64},[54,418,419],{"class":71},"250",[54,421,303],{"class":81},[54,423,119],{"class":64},[54,425,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454,456,458,460,463,465],{"class":56,"line":321},[54,427,72],{"class":71},[54,429,75],{"class":64},[54,431,346],{"class":71},[54,433,82],{"class":81},[54,435,351],{"class":71},[54,437,82],{"class":81},[54,439,85],{"class":71},[54,441,82],{"class":81},[54,443,95],{"class":71},[54,445,82],{"class":81},[54,447,100],{"class":64},[54,449,78],{"class":71},[54,451,82],{"class":81},[54,453,85],{"class":71},[54,455,82],{"class":81},[54,457,95],{"class":71},[54,459,82],{"class":81},[54,461,462],{"class":71}," 50",[54,464,82],{"class":81},[54,466,119],{"class":64},[54,468,469,471,473,476],{"class":56,"line":366},[54,470,369],{"class":71},[54,472,75],{"class":64},[54,474,475],{"class":71},"#34d399",[54,477,119],{"class":64},[54,479,480],{"class":56,"line":379},[54,481,125],{"class":64},[133,483,485],{"id":484},"sharp-organic-shape","Sharp Organic Shape",[45,487,489],{"className":47,"code":488,"language":49,"meta":50,"style":50},".blob-sharp {\n  width: 300px;\n  height: 300px;\n  border-radius: 80% 20% 60% 40% \u002F 40% 60% 20% 80%;\n  background: #f472b6;\n}\n",[19,490,491,498,510,522,568,579],{"__ignoreMap":50},[54,492,493,496],{"class":56,"line":57},[54,494,495],{"class":60},".blob-sharp",[54,497,65],{"class":64},[54,499,500,502,504,506,508],{"class":56,"line":68},[54,501,295],{"class":71},[54,503,75],{"class":64},[54,505,300],{"class":71},[54,507,303],{"class":81},[54,509,119],{"class":64},[54,511,512,514,516,518,520],{"class":56,"line":122},[54,513,310],{"class":71},[54,515,75],{"class":64},[54,517,300],{"class":71},[54,519,303],{"class":81},[54,521,119],{"class":64},[54,523,524,526,528,531,533,536,538,540,542,544,546,548,551,553,555,557,559,561,564,566],{"class":56,"line":321},[54,525,72],{"class":71},[54,527,75],{"class":64},[54,529,530],{"class":71},"80",[54,532,82],{"class":81},[54,534,535],{"class":71}," 20",[54,537,82],{"class":81},[54,539,351],{"class":71},[54,541,82],{"class":81},[54,543,85],{"class":71},[54,545,82],{"class":81},[54,547,100],{"class":64},[54,549,550],{"class":71},"40",[54,552,82],{"class":81},[54,554,351],{"class":71},[54,556,82],{"class":81},[54,558,535],{"class":71},[54,560,82],{"class":81},[54,562,563],{"class":71}," 80",[54,565,82],{"class":81},[54,567,119],{"class":64},[54,569,570,572,574,577],{"class":56,"line":366},[54,571,369],{"class":71},[54,573,75],{"class":64},[54,575,576],{"class":71},"#f472b6",[54,578,119],{"class":64},[54,580,581],{"class":56,"line":379},[54,582,125],{"class":64},[133,584,586],{"id":585},"minimal-blob","Minimal Blob",[45,588,590],{"className":47,"code":589,"language":49,"meta":50,"style":50},".blob-minimal {\n  width: 300px;\n  height: 300px;\n  border-radius: 50% 50% 45% 55% \u002F 55% 45% 55% 45%;\n  background: #60a5fa;\n}\n",[19,591,592,599,611,623,668,679],{"__ignoreMap":50},[54,593,594,597],{"class":56,"line":57},[54,595,596],{"class":60},".blob-minimal",[54,598,65],{"class":64},[54,600,601,603,605,607,609],{"class":56,"line":68},[54,602,295],{"class":71},[54,604,75],{"class":64},[54,606,300],{"class":71},[54,608,303],{"class":81},[54,610,119],{"class":64},[54,612,613,615,617,619,621],{"class":56,"line":122},[54,614,310],{"class":71},[54,616,75],{"class":64},[54,618,300],{"class":71},[54,620,303],{"class":81},[54,622,119],{"class":64},[54,624,625,627,629,631,633,635,637,640,642,645,647,649,652,654,656,658,660,662,664,666],{"class":56,"line":321},[54,626,72],{"class":71},[54,628,75],{"class":64},[54,630,346],{"class":71},[54,632,82],{"class":81},[54,634,462],{"class":71},[54,636,82],{"class":81},[54,638,639],{"class":71}," 45",[54,641,82],{"class":81},[54,643,644],{"class":71}," 55",[54,646,82],{"class":81},[54,648,100],{"class":64},[54,650,651],{"class":71},"55",[54,653,82],{"class":81},[54,655,639],{"class":71},[54,657,82],{"class":81},[54,659,644],{"class":71},[54,661,82],{"class":81},[54,663,639],{"class":71},[54,665,82],{"class":81},[54,667,119],{"class":64},[54,669,670,672,674,677],{"class":56,"line":366},[54,671,369],{"class":71},[54,673,75],{"class":64},[54,675,676],{"class":71},"#60a5fa",[54,678,119],{"class":64},[54,680,681],{"class":56,"line":379},[54,682,125],{"class":64},[15,684,685],{},"The closer all values are to 50%, the more circular the shape. Pushing individual values to extremes (80%\u002F20%) creates more dramatic deformations.",[10,687,689],{"id":688},"animating-blobs","Animating Blobs",[15,691,692,693,696],{},"Blobs come alive with animation. Use ",[19,694,695],{},"@keyframes"," to morph between border-radius values:",[45,698,700],{"className":47,"code":699,"language":49,"meta":50,"style":50},"@keyframes morph {\n  0%   { border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%; }\n  50%  { border-radius: 30% 60% 70% 40% \u002F 50% 60% 30% 60%; }\n  100% { border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%; }\n}\n\n.blob-animated {\n  width: 300px;\n  height: 300px;\n  background: linear-gradient(135deg, #667eea, #764ba2);\n  animation: morph 8s ease-in-out infinite;\n}\n",[19,701,702,712,761,810,858,862,868,876,889,902,935,958],{"__ignoreMap":50},[54,703,704,706,710],{"class":56,"line":57},[54,705,695],{"class":81},[54,707,709],{"class":708},"s4XuR"," morph",[54,711,65],{"class":64},[54,713,714,717,720,722,724,726,728,730,732,734,736,738,740,742,744,746,748,750,752,754,756,758],{"class":56,"line":68},[54,715,716],{"class":60},"  0%",[54,718,719],{"class":64},"   { ",[54,721,21],{"class":71},[54,723,75],{"class":64},[54,725,78],{"class":71},[54,727,82],{"class":81},[54,729,85],{"class":71},[54,731,82],{"class":81},[54,733,90],{"class":71},[54,735,82],{"class":81},[54,737,95],{"class":71},[54,739,82],{"class":81},[54,741,100],{"class":64},[54,743,78],{"class":71},[54,745,82],{"class":81},[54,747,90],{"class":71},[54,749,82],{"class":81},[54,751,95],{"class":71},[54,753,82],{"class":81},[54,755,85],{"class":71},[54,757,82],{"class":81},[54,759,760],{"class":64},"; }\n",[54,762,763,766,769,771,773,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,806,808],{"class":56,"line":122},[54,764,765],{"class":60},"  50%",[54,767,768],{"class":64},"  { ",[54,770,21],{"class":71},[54,772,75],{"class":64},[54,774,775],{"class":71},"30",[54,777,82],{"class":81},[54,779,351],{"class":71},[54,781,82],{"class":81},[54,783,95],{"class":71},[54,785,82],{"class":81},[54,787,85],{"class":71},[54,789,82],{"class":81},[54,791,100],{"class":64},[54,793,346],{"class":71},[54,795,82],{"class":81},[54,797,351],{"class":71},[54,799,82],{"class":81},[54,801,90],{"class":71},[54,803,82],{"class":81},[54,805,351],{"class":71},[54,807,82],{"class":81},[54,809,760],{"class":64},[54,811,812,815,818,820,822,824,826,828,830,832,834,836,838,840,842,844,846,848,850,852,854,856],{"class":56,"line":321},[54,813,814],{"class":60},"  100%",[54,816,817],{"class":64}," { ",[54,819,21],{"class":71},[54,821,75],{"class":64},[54,823,78],{"class":71},[54,825,82],{"class":81},[54,827,85],{"class":71},[54,829,82],{"class":81},[54,831,90],{"class":71},[54,833,82],{"class":81},[54,835,95],{"class":71},[54,837,82],{"class":81},[54,839,100],{"class":64},[54,841,78],{"class":71},[54,843,82],{"class":81},[54,845,90],{"class":71},[54,847,82],{"class":81},[54,849,95],{"class":71},[54,851,82],{"class":81},[54,853,85],{"class":71},[54,855,82],{"class":81},[54,857,760],{"class":64},[54,859,860],{"class":56,"line":366},[54,861,125],{"class":64},[54,863,864],{"class":56,"line":379},[54,865,867],{"emptyLinePlaceholder":866},true,"\n",[54,869,871,874],{"class":56,"line":870},7,[54,872,873],{"class":60},".blob-animated",[54,875,65],{"class":64},[54,877,879,881,883,885,887],{"class":56,"line":878},8,[54,880,295],{"class":71},[54,882,75],{"class":64},[54,884,300],{"class":71},[54,886,303],{"class":81},[54,888,119],{"class":64},[54,890,892,894,896,898,900],{"class":56,"line":891},9,[54,893,310],{"class":71},[54,895,75],{"class":64},[54,897,300],{"class":71},[54,899,303],{"class":81},[54,901,119],{"class":64},[54,903,905,907,909,912,915,918,921,924,927,929,932],{"class":56,"line":904},10,[54,906,369],{"class":71},[54,908,75],{"class":64},[54,910,911],{"class":71},"linear-gradient",[54,913,914],{"class":64},"(",[54,916,917],{"class":71},"135",[54,919,920],{"class":81},"deg",[54,922,923],{"class":64},", ",[54,925,926],{"class":71},"#667eea",[54,928,923],{"class":64},[54,930,931],{"class":71},"#764ba2",[54,933,934],{"class":64},");\n",[54,936,938,941,944,947,950,953,956],{"class":56,"line":937},11,[54,939,940],{"class":71},"  animation",[54,942,943],{"class":64},": morph ",[54,945,946],{"class":71},"8",[54,948,949],{"class":81},"s",[54,951,952],{"class":71}," ease-in-out",[54,954,955],{"class":71}," infinite",[54,957,119],{"class":64},[54,959,961],{"class":56,"line":960},12,[54,962,125],{"class":64},[133,964,966],{"id":965},"performance-tip","Performance Tip",[15,968,969,970,973],{},"Border-radius animation is GPU-accelerated in modern browsers, making it efficient for continuous animations. However, combine it with ",[19,971,972],{},"transform"," for the best performance profile:",[45,975,977],{"className":47,"code":976,"language":49,"meta":50,"style":50},"@keyframes morph-float {\n  0%, 100% {\n    border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n    transform: translateY(0) rotate(0deg);\n  }\n  50% {\n    border-radius: 30% 60% 70% 40% \u002F 50% 60% 30% 60%;\n    transform: translateY(-20px) rotate(5deg);\n  }\n}\n",[19,978,979,988,999,1042,1071,1076,1082,1124,1152,1156],{"__ignoreMap":50},[54,980,981,983,986],{"class":56,"line":57},[54,982,695],{"class":81},[54,984,985],{"class":708}," morph-float",[54,987,65],{"class":64},[54,989,990,992,994,997],{"class":56,"line":68},[54,991,716],{"class":60},[54,993,923],{"class":64},[54,995,996],{"class":60},"100%",[54,998,65],{"class":64},[54,1000,1001,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040],{"class":56,"line":122},[54,1002,1003],{"class":71},"    border-radius",[54,1005,75],{"class":64},[54,1007,78],{"class":71},[54,1009,82],{"class":81},[54,1011,85],{"class":71},[54,1013,82],{"class":81},[54,1015,90],{"class":71},[54,1017,82],{"class":81},[54,1019,95],{"class":71},[54,1021,82],{"class":81},[54,1023,100],{"class":64},[54,1025,78],{"class":71},[54,1027,82],{"class":81},[54,1029,90],{"class":71},[54,1031,82],{"class":81},[54,1033,95],{"class":71},[54,1035,82],{"class":81},[54,1037,85],{"class":71},[54,1039,82],{"class":81},[54,1041,119],{"class":64},[54,1043,1044,1047,1049,1052,1054,1057,1060,1063,1065,1067,1069],{"class":56,"line":321},[54,1045,1046],{"class":71},"    transform",[54,1048,75],{"class":64},[54,1050,1051],{"class":71},"translateY",[54,1053,914],{"class":64},[54,1055,1056],{"class":71},"0",[54,1058,1059],{"class":64},") ",[54,1061,1062],{"class":71},"rotate",[54,1064,914],{"class":64},[54,1066,1056],{"class":71},[54,1068,920],{"class":81},[54,1070,934],{"class":64},[54,1072,1073],{"class":56,"line":366},[54,1074,1075],{"class":64},"  }\n",[54,1077,1078,1080],{"class":56,"line":379},[54,1079,765],{"class":60},[54,1081,65],{"class":64},[54,1083,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122],{"class":56,"line":870},[54,1085,1003],{"class":71},[54,1087,75],{"class":64},[54,1089,775],{"class":71},[54,1091,82],{"class":81},[54,1093,351],{"class":71},[54,1095,82],{"class":81},[54,1097,95],{"class":71},[54,1099,82],{"class":81},[54,1101,85],{"class":71},[54,1103,82],{"class":81},[54,1105,100],{"class":64},[54,1107,346],{"class":71},[54,1109,82],{"class":81},[54,1111,351],{"class":71},[54,1113,82],{"class":81},[54,1115,90],{"class":71},[54,1117,82],{"class":81},[54,1119,351],{"class":71},[54,1121,82],{"class":81},[54,1123,119],{"class":64},[54,1125,1126,1128,1130,1132,1134,1137,1139,1141,1143,1145,1148,1150],{"class":56,"line":878},[54,1127,1046],{"class":71},[54,1129,75],{"class":64},[54,1131,1051],{"class":71},[54,1133,914],{"class":64},[54,1135,1136],{"class":71},"-20",[54,1138,303],{"class":81},[54,1140,1059],{"class":64},[54,1142,1062],{"class":71},[54,1144,914],{"class":64},[54,1146,1147],{"class":71},"5",[54,1149,920],{"class":81},[54,1151,934],{"class":64},[54,1153,1154],{"class":56,"line":891},[54,1155,1075],{"class":64},[54,1157,1158],{"class":56,"line":904},[54,1159,125],{"class":64},[10,1161,1163],{"id":1162},"practical-design-patterns","Practical Design Patterns",[133,1165,1167],{"id":1166},"hero-background-blobs","Hero Background Blobs",[45,1169,1173],{"className":1170,"code":1171,"language":1172,"meta":50,"style":50},"language-html shiki shiki-themes github-light github-dark","\u003Csection class=\"relative overflow-hidden\">\n  \u003Cdiv class=\"absolute -top-20 -left-20 w-96 h-96 bg-purple-300\u002F30\n              border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n              blur-xl\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"absolute bottom-0 right-0 w-80 h-80 bg-pink-300\u002F30\n              border-radius: 40% 60% 70% 30% \u002F 40% 70% 30% 60%;\n              blur-xl\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"relative z-10\">\n    \u003C!-- Hero content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n","html",[19,1174,1175,1196,1211,1216,1228,1241,1246,1256,1271,1277,1286],{"__ignoreMap":50},[54,1176,1177,1180,1183,1186,1189,1193],{"class":56,"line":57},[54,1178,1179],{"class":64},"\u003C",[54,1181,1182],{"class":146},"section",[54,1184,1185],{"class":60}," class",[54,1187,1188],{"class":64},"=",[54,1190,1192],{"class":1191},"sZZnC","\"relative overflow-hidden\"",[54,1194,1195],{"class":64},">\n",[54,1197,1198,1201,1204,1206,1208],{"class":56,"line":68},[54,1199,1200],{"class":64},"  \u003C",[54,1202,1203],{"class":146},"div",[54,1205,1185],{"class":60},[54,1207,1188],{"class":64},[54,1209,1210],{"class":1191},"\"absolute -top-20 -left-20 w-96 h-96 bg-purple-300\u002F30\n",[54,1212,1213],{"class":56,"line":122},[54,1214,1215],{"class":1191},"              border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n",[54,1217,1218,1221,1224,1226],{"class":56,"line":321},[54,1219,1220],{"class":1191},"              blur-xl\"",[54,1222,1223],{"class":64},">\u003C\u002F",[54,1225,1203],{"class":146},[54,1227,1195],{"class":64},[54,1229,1230,1232,1234,1236,1238],{"class":56,"line":366},[54,1231,1200],{"class":64},[54,1233,1203],{"class":146},[54,1235,1185],{"class":60},[54,1237,1188],{"class":64},[54,1239,1240],{"class":1191},"\"absolute bottom-0 right-0 w-80 h-80 bg-pink-300\u002F30\n",[54,1242,1243],{"class":56,"line":379},[54,1244,1245],{"class":1191},"              border-radius: 40% 60% 70% 30% \u002F 40% 70% 30% 60%;\n",[54,1247,1248,1250,1252,1254],{"class":56,"line":870},[54,1249,1220],{"class":1191},[54,1251,1223],{"class":64},[54,1253,1203],{"class":146},[54,1255,1195],{"class":64},[54,1257,1258,1260,1262,1264,1266,1269],{"class":56,"line":878},[54,1259,1200],{"class":64},[54,1261,1203],{"class":146},[54,1263,1185],{"class":60},[54,1265,1188],{"class":64},[54,1267,1268],{"class":1191},"\"relative z-10\"",[54,1270,1195],{"class":64},[54,1272,1273],{"class":56,"line":891},[54,1274,1276],{"class":1275},"sJ8bj","    \u003C!-- Hero content -->\n",[54,1278,1279,1282,1284],{"class":56,"line":904},[54,1280,1281],{"class":64},"  \u003C\u002F",[54,1283,1203],{"class":146},[54,1285,1195],{"class":64},[54,1287,1288,1291,1293],{"class":56,"line":937},[54,1289,1290],{"class":64},"\u003C\u002F",[54,1292,1182],{"class":146},[54,1294,1195],{"class":64},[133,1296,1298],{"id":1297},"profile-avatar-blob","Profile Avatar Blob",[45,1300,1302],{"className":47,"code":1301,"language":49,"meta":50,"style":50},".avatar-blob {\n  width: 120px;\n  height: 120px;\n  border-radius: 62% 38% 58% 42% \u002F 48% 62% 38% 52%;\n  object-fit: cover;\n}\n",[19,1303,1304,1311,1324,1336,1385,1397],{"__ignoreMap":50},[54,1305,1306,1309],{"class":56,"line":57},[54,1307,1308],{"class":60},".avatar-blob",[54,1310,65],{"class":64},[54,1312,1313,1315,1317,1320,1322],{"class":56,"line":68},[54,1314,295],{"class":71},[54,1316,75],{"class":64},[54,1318,1319],{"class":71},"120",[54,1321,303],{"class":81},[54,1323,119],{"class":64},[54,1325,1326,1328,1330,1332,1334],{"class":56,"line":122},[54,1327,310],{"class":71},[54,1329,75],{"class":64},[54,1331,1319],{"class":71},[54,1333,303],{"class":81},[54,1335,119],{"class":64},[54,1337,1338,1340,1342,1345,1347,1350,1352,1355,1357,1360,1362,1364,1367,1369,1372,1374,1376,1378,1381,1383],{"class":56,"line":321},[54,1339,72],{"class":71},[54,1341,75],{"class":64},[54,1343,1344],{"class":71},"62",[54,1346,82],{"class":81},[54,1348,1349],{"class":71}," 38",[54,1351,82],{"class":81},[54,1353,1354],{"class":71}," 58",[54,1356,82],{"class":81},[54,1358,1359],{"class":71}," 42",[54,1361,82],{"class":81},[54,1363,100],{"class":64},[54,1365,1366],{"class":71},"48",[54,1368,82],{"class":81},[54,1370,1371],{"class":71}," 62",[54,1373,82],{"class":81},[54,1375,1349],{"class":71},[54,1377,82],{"class":81},[54,1379,1380],{"class":71}," 52",[54,1382,82],{"class":81},[54,1384,119],{"class":64},[54,1386,1387,1390,1392,1395],{"class":56,"line":366},[54,1388,1389],{"class":71},"  object-fit",[54,1391,75],{"class":64},[54,1393,1394],{"class":71},"cover",[54,1396,119],{"class":64},[54,1398,1399],{"class":56,"line":379},[54,1400,125],{"class":64},[133,1402,1404],{"id":1403},"decorative-card-accent","Decorative Card Accent",[45,1406,1408],{"className":47,"code":1407,"language":49,"meta":50,"style":50},".card::before {\n  content: '';\n  position: absolute;\n  top: -30px;\n  right: -30px;\n  width: 120px;\n  height: 120px;\n  border-radius: 40% 60% 50% 50% \u002F 60% 40% 60% 40%;\n  background: rgba(99, 102, 241, 0.1);\n  z-index: -1;\n}\n",[19,1409,1410,1417,1429,1441,1455,1468,1480,1492,1534,1565,1577],{"__ignoreMap":50},[54,1411,1412,1415],{"class":56,"line":57},[54,1413,1414],{"class":60},".card::before",[54,1416,65],{"class":64},[54,1418,1419,1422,1424,1427],{"class":56,"line":68},[54,1420,1421],{"class":71},"  content",[54,1423,75],{"class":64},[54,1425,1426],{"class":1191},"''",[54,1428,119],{"class":64},[54,1430,1431,1434,1436,1439],{"class":56,"line":122},[54,1432,1433],{"class":71},"  position",[54,1435,75],{"class":64},[54,1437,1438],{"class":71},"absolute",[54,1440,119],{"class":64},[54,1442,1443,1446,1448,1451,1453],{"class":56,"line":321},[54,1444,1445],{"class":71},"  top",[54,1447,75],{"class":64},[54,1449,1450],{"class":71},"-30",[54,1452,303],{"class":81},[54,1454,119],{"class":64},[54,1456,1457,1460,1462,1464,1466],{"class":56,"line":366},[54,1458,1459],{"class":71},"  right",[54,1461,75],{"class":64},[54,1463,1450],{"class":71},[54,1465,303],{"class":81},[54,1467,119],{"class":64},[54,1469,1470,1472,1474,1476,1478],{"class":56,"line":379},[54,1471,295],{"class":71},[54,1473,75],{"class":64},[54,1475,1319],{"class":71},[54,1477,303],{"class":81},[54,1479,119],{"class":64},[54,1481,1482,1484,1486,1488,1490],{"class":56,"line":870},[54,1483,310],{"class":71},[54,1485,75],{"class":64},[54,1487,1319],{"class":71},[54,1489,303],{"class":81},[54,1491,119],{"class":64},[54,1493,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532],{"class":56,"line":878},[54,1495,72],{"class":71},[54,1497,75],{"class":64},[54,1499,550],{"class":71},[54,1501,82],{"class":81},[54,1503,351],{"class":71},[54,1505,82],{"class":81},[54,1507,462],{"class":71},[54,1509,82],{"class":81},[54,1511,462],{"class":71},[54,1513,82],{"class":81},[54,1515,100],{"class":64},[54,1517,78],{"class":71},[54,1519,82],{"class":81},[54,1521,85],{"class":71},[54,1523,82],{"class":81},[54,1525,351],{"class":71},[54,1527,82],{"class":81},[54,1529,85],{"class":71},[54,1531,82],{"class":81},[54,1533,119],{"class":64},[54,1535,1536,1538,1540,1543,1545,1548,1550,1553,1555,1558,1560,1563],{"class":56,"line":891},[54,1537,369],{"class":71},[54,1539,75],{"class":64},[54,1541,1542],{"class":71},"rgba",[54,1544,914],{"class":64},[54,1546,1547],{"class":71},"99",[54,1549,923],{"class":64},[54,1551,1552],{"class":71},"102",[54,1554,923],{"class":64},[54,1556,1557],{"class":71},"241",[54,1559,923],{"class":64},[54,1561,1562],{"class":71},"0.1",[54,1564,934],{"class":64},[54,1566,1567,1570,1572,1575],{"class":56,"line":904},[54,1568,1569],{"class":71},"  z-index",[54,1571,75],{"class":64},[54,1573,1574],{"class":71},"-1",[54,1576,119],{"class":64},[54,1578,1579],{"class":56,"line":937},[54,1580,125],{"class":64},[10,1582,1584],{"id":1583},"combining-blobs-with-gradients","Combining Blobs with Gradients",[15,1586,1587],{},"Blobs paired with gradients produce rich, layered visuals:",[45,1589,1591],{"className":47,"code":1590,"language":49,"meta":50,"style":50},".blob-gradient {\n  width: 400px;\n  height: 400px;\n  border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  filter: blur(0px);\n}\n",[19,1592,1593,1600,1612,1624,1666,1702,1720],{"__ignoreMap":50},[54,1594,1595,1598],{"class":56,"line":57},[54,1596,1597],{"class":60},".blob-gradient",[54,1599,65],{"class":64},[54,1601,1602,1604,1606,1608,1610],{"class":56,"line":68},[54,1603,295],{"class":71},[54,1605,75],{"class":64},[54,1607,406],{"class":71},[54,1609,303],{"class":81},[54,1611,119],{"class":64},[54,1613,1614,1616,1618,1620,1622],{"class":56,"line":122},[54,1615,310],{"class":71},[54,1617,75],{"class":64},[54,1619,406],{"class":71},[54,1621,303],{"class":81},[54,1623,119],{"class":64},[54,1625,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664],{"class":56,"line":321},[54,1627,72],{"class":71},[54,1629,75],{"class":64},[54,1631,78],{"class":71},[54,1633,82],{"class":81},[54,1635,85],{"class":71},[54,1637,82],{"class":81},[54,1639,90],{"class":71},[54,1641,82],{"class":81},[54,1643,95],{"class":71},[54,1645,82],{"class":81},[54,1647,100],{"class":64},[54,1649,78],{"class":71},[54,1651,82],{"class":81},[54,1653,90],{"class":71},[54,1655,82],{"class":81},[54,1657,95],{"class":71},[54,1659,82],{"class":81},[54,1661,85],{"class":71},[54,1663,82],{"class":81},[54,1665,119],{"class":64},[54,1667,1668,1670,1672,1674,1676,1678,1680,1682,1685,1688,1690,1692,1695,1698,1700],{"class":56,"line":366},[54,1669,369],{"class":71},[54,1671,75],{"class":64},[54,1673,911],{"class":71},[54,1675,914],{"class":64},[54,1677,917],{"class":71},[54,1679,920],{"class":81},[54,1681,923],{"class":64},[54,1683,1684],{"class":71},"#f093fb",[54,1686,1687],{"class":71}," 0",[54,1689,82],{"class":81},[54,1691,923],{"class":64},[54,1693,1694],{"class":71},"#f5576c",[54,1696,1697],{"class":71}," 100",[54,1699,82],{"class":81},[54,1701,934],{"class":64},[54,1703,1704,1707,1709,1712,1714,1716,1718],{"class":56,"line":379},[54,1705,1706],{"class":71},"  filter",[54,1708,75],{"class":64},[54,1710,1711],{"class":71},"blur",[54,1713,914],{"class":64},[54,1715,1056],{"class":71},[54,1717,303],{"class":81},[54,1719,934],{"class":64},[54,1721,1722],{"class":56,"line":870},[54,1723,125],{"class":64},[15,1725,1726],{},"Multi-stop gradients on blobs create a sense of volume and light direction:",[45,1728,1730],{"className":47,"code":1729,"language":49,"meta":50,"style":50},".blob-volume {\n  width: 300px;\n  height: 300px;\n  border-radius: 70% 30% 50% 50% \u002F 40% 60% 40% 60%;\n  background:\n    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%),\n    linear-gradient(135deg, #4f46e5, #7c3aed);\n}\n",[19,1731,1732,1739,1751,1763,1806,1813,1870,1893],{"__ignoreMap":50},[54,1733,1734,1737],{"class":56,"line":57},[54,1735,1736],{"class":60},".blob-volume",[54,1738,65],{"class":64},[54,1740,1741,1743,1745,1747,1749],{"class":56,"line":68},[54,1742,295],{"class":71},[54,1744,75],{"class":64},[54,1746,300],{"class":71},[54,1748,303],{"class":81},[54,1750,119],{"class":64},[54,1752,1753,1755,1757,1759,1761],{"class":56,"line":122},[54,1754,310],{"class":71},[54,1756,75],{"class":64},[54,1758,300],{"class":71},[54,1760,303],{"class":81},[54,1762,119],{"class":64},[54,1764,1765,1767,1769,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804],{"class":56,"line":321},[54,1766,72],{"class":71},[54,1768,75],{"class":64},[54,1770,1771],{"class":71},"70",[54,1773,82],{"class":81},[54,1775,90],{"class":71},[54,1777,82],{"class":81},[54,1779,462],{"class":71},[54,1781,82],{"class":81},[54,1783,462],{"class":71},[54,1785,82],{"class":81},[54,1787,100],{"class":64},[54,1789,550],{"class":71},[54,1791,82],{"class":81},[54,1793,351],{"class":71},[54,1795,82],{"class":81},[54,1797,85],{"class":71},[54,1799,82],{"class":81},[54,1801,351],{"class":71},[54,1803,82],{"class":81},[54,1805,119],{"class":64},[54,1807,1808,1810],{"class":56,"line":366},[54,1809,369],{"class":71},[54,1811,1812],{"class":64},":\n",[54,1814,1815,1818,1820,1823,1826,1828,1830,1832,1834,1836,1838,1840,1843,1846,1848,1850,1852,1854,1857,1860,1863,1865,1867],{"class":56,"line":379},[54,1816,1817],{"class":71},"    radial-gradient",[54,1819,914],{"class":64},[54,1821,1822],{"class":71},"circle",[54,1824,1825],{"class":81}," at",[54,1827,90],{"class":71},[54,1829,82],{"class":81},[54,1831,90],{"class":71},[54,1833,82],{"class":81},[54,1835,923],{"class":64},[54,1837,1542],{"class":71},[54,1839,914],{"class":64},[54,1841,1842],{"class":71},"255",[54,1844,1845],{"class":64},",",[54,1847,1842],{"class":71},[54,1849,1845],{"class":64},[54,1851,1842],{"class":71},[54,1853,1845],{"class":64},[54,1855,1856],{"class":71},"0.3",[54,1858,1859],{"class":64},"), ",[54,1861,1862],{"class":71},"transparent",[54,1864,462],{"class":71},[54,1866,82],{"class":81},[54,1868,1869],{"class":64},"),\n",[54,1871,1872,1875,1877,1879,1881,1883,1886,1888,1891],{"class":56,"line":870},[54,1873,1874],{"class":71},"    linear-gradient",[54,1876,914],{"class":64},[54,1878,917],{"class":71},[54,1880,920],{"class":81},[54,1882,923],{"class":64},[54,1884,1885],{"class":71},"#4f46e5",[54,1887,923],{"class":64},[54,1889,1890],{"class":71},"#7c3aed",[54,1892,934],{"class":64},[54,1894,1895],{"class":56,"line":878},[54,1896,125],{"class":64},[10,1898,1900],{"id":1899},"related-guides","Related Guides",[1902,1903,1904,1912,1918],"ul",{},[1905,1906,1907],"li",{},[1908,1909,1911],"a",{"href":1910},"\u002Fguides\u002Fborder-radius-guide","Border Radius Guide",[1905,1913,1914],{},[1908,1915,1917],{"href":1916},"\u002Fguides\u002Fcss-shapes-and-borders","CSS Shapes and Borders",[1905,1919,1920],{},[1908,1921,1923],{"href":1922},"\u002Fguides\u002Fcss-rounded-corners-tutorial","CSS Rounded Corners Tutorial",[10,1925,1927],{"id":1926},"try-it-yourself","Try It Yourself",[15,1929,1930],{},"Generate blob shapes visually — drag corner handles, pick gradient colors, and copy the CSS with our interactive border-radius tool.",[15,1932,1933,1934],{},"👉 ",[1908,1935,1937],{"href":1936},"\u002Ftools\u002Fborder-radius",[1938,1939,1940],"strong",{},"Border Radius Generator",[1942,1943,1944],"style",{},"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":50,"searchDepth":68,"depth":68,"links":1946},[1947,1948,1951,1957,1960,1965,1966,1967],{"id":12,"depth":68,"text":13},{"id":31,"depth":68,"text":32,"children":1949},[1950],{"id":135,"depth":122,"text":136},{"id":273,"depth":68,"text":274,"children":1952},[1953,1954,1955,1956],{"id":277,"depth":122,"text":278},{"id":384,"depth":122,"text":385},{"id":484,"depth":122,"text":485},{"id":585,"depth":122,"text":586},{"id":688,"depth":68,"text":689,"children":1958},[1959],{"id":965,"depth":122,"text":966},{"id":1162,"depth":68,"text":1163,"children":1961},[1962,1963,1964],{"id":1166,"depth":122,"text":1167},{"id":1297,"depth":122,"text":1298},{"id":1403,"depth":122,"text":1404},{"id":1583,"depth":68,"text":1584},{"id":1899,"depth":68,"text":1900},{"id":1926,"depth":68,"text":1927},"2026-05-28","Create organic blob and blob-like shapes using asymmetric border-radius values in CSS.","md",{"immutable":866},"\u002Fguides\u002Fcss-blob-shapes",{"title":5,"description":1969},"guides\u002Fcss-blob-shapes","fugrvKTt1yTVfQJ-b5l_cVu-U2tyP7RVnEJyLqBC8y8",1780401332684]