[{"data":1,"prerenderedAt":2406},["ShallowReactive",2],{"\u002Fblog\u002Fcss-shape-generator-guide-2026":3,"recommended-\u002Fblog\u002Fcss-shape-generator-guide-2026":946},{"id":4,"title":5,"author":6,"body":7,"category":929,"date":930,"description":931,"draft":932,"extension":933,"image":934,"meta":935,"metaTitle":936,"navigation":937,"path":938,"seo":939,"stem":940,"tags":941,"__hash__":945},"blog\u002Fblog\u002Fcss-shape-generator-guide-2026.md","How to Generate CSS Shapes Without Images: Polygons, Blobs, Stars and More","Ganesh Kanse",{"type":8,"value":9,"toc":902},"minimark",[10,15,19,31,34,57,63,67,76,81,120,124,127,219,223,241,245,255,259,263,268,383,386,391,423,431,443,447,456,460,464,471,588,592,599,603,606,610,613,617,624,628,631,712,720,724,775,779,784,792,797,800,805,816,821,824,829,835,839,844,860,863,867,898],[11,12,14],"h2",{"id":13},"why-css-shapes-matter","Why CSS shapes matter",[16,17,18],"p",{},"Every element on a web page is a rectangle. Headings, paragraphs, images, buttons, cards;  they are all boxes. This is a fundamental constraint of the CSS box model.",[16,20,21,22,26,27,30],{},"CSS shapes break that constraint. Using properties like ",[23,24,25],"code",{},"clip-path"," and ",[23,28,29],{},"mask",", you can make any element appear as a circle, hexagon, star, blob, or any custom shape without using images, SVG files, or canvas. The element itself remains a rectangle in the layout, but its visible area is clipped to the desired shape.",[16,32,33],{},"This matters for three reasons:",[35,36,37,45,51],"ol",{},[38,39,40,44],"li",{},[41,42,43],"strong",{},"Performance."," CSS shapes are rendered by the browser's compositor. They add zero file size to the page:  no images to download, no SVGs to parse. This is the lightest possible way to add non-rectangular visuals.",[38,46,47,50],{},[41,48,49],{},"Responsiveness."," CSS shapes defined with percentage-based coordinates scale automatically with their container. A hexagonal card looks correct at 300px and at 800px without media queries.",[38,52,53,56],{},[41,54,55],{},"Maintainability."," CSS shapes live in your stylesheet, not in your asset pipeline. Changing the shape of a component is a CSS edit, not a design asset swap.",[16,58,59,60,62],{},"The challenge is that writing ",[23,61,25],{}," polygon coordinates by hand is tedious and error-prone. A hexagon requires calculating six points in percentages. A star requires twice as many. A wavy circle requires trigonometric calculations that most developers do not want to do manually.",[11,64,66],{"id":65},"what-does-the-css-shape-generator-do","What does the CSS Shape Generator do?",[16,68,69,70,75],{},"The ",[71,72,74],"a",{"href":73},"\u002Ftools\u002Fcss-shape-generator","CampaignMorph CSS Shape Generator"," solves this by providing a visual interface where you adjust parameters and see the shape update in real time. When the shape looks right, you copy the production-ready CSS.",[77,78,80],"h3",{"id":79},"available-shape-types","Available shape types",[82,83,84,90,96,102,108,114],"ul",{},[38,85,86,89],{},[41,87,88],{},"Polygon",": regular polygons from triangles (3 sides) to dodecagons (12+ sides), with adjustable rotation and optional rounded corners",[38,91,92,95],{},[41,93,94],{},"Star",": multi-pointed stars with adjustable inner radius to control how sharp or blunt the points are",[38,97,98,101],{},[41,99,100],{},"Wavy circle",": circular shapes with a wave pattern applied to the edge, creating organic cloud-like or gear-like outlines",[38,103,104,107],{},[41,105,106],{},"Flower",": petal-based shapes with adjustable petal count, size, and curvature",[38,109,110,113],{},[41,111,112],{},"Blob",": organic, irregular shapes generated from a random seed, similar to hand-drawn forms",[38,115,116,119],{},[41,117,118],{},"Starburst",": pointed shapes radiating from the centre, commonly used for badges, sale tags, and callout labels",[77,121,123],{"id":122},"customisation-parameters","Customisation parameters",[16,125,126],{},"Each shape type exposes the parameters that matter for that shape:",[128,129,130,143],"table",{},[131,132,133],"thead",{},[134,135,136,140],"tr",{},[137,138,139],"th",{},"Parameter",[137,141,142],{},"What it controls",[144,145,146,155,163,171,179,187,195,203,211],"tbody",{},[134,147,148,152],{},[149,150,151],"td",{},"Sides \u002F Points",[149,153,154],{},"Number of edges or points (polygons, stars)",[134,156,157,160],{},[149,158,159],{},"Inner radius",[149,161,162],{},"How deep the indentations go (stars, starbursts)",[134,164,165,168],{},[149,166,167],{},"Waves",[149,169,170],{},"Number of undulations around the edge (wavy circles)",[134,172,173,176],{},[149,174,175],{},"Amplitude",[149,177,178],{},"How pronounced the waves are",[134,180,181,184],{},[149,182,183],{},"Rotation",[149,185,186],{},"Angular rotation of the entire shape",[134,188,189,192],{},[149,190,191],{},"Curvature",[149,193,194],{},"How rounded the transitions between points are",[134,196,197,200],{},[149,198,199],{},"Corner radius",[149,201,202],{},"Rounding of polygon vertices",[134,204,205,208],{},[149,206,207],{},"Seed",[149,209,210],{},"Random seed for blob generation",[134,212,213,216],{},[149,214,215],{},"Size",[149,217,218],{},"Preview size in pixels",[77,220,222],{"id":221},"style-options","Style options",[82,224,225,235],{},[38,226,227,230,231,234],{},[41,228,229],{},"Solid colour"," or ",[41,232,233],{},"two-colour gradient"," with adjustable angle",[38,236,237,240],{},[41,238,239],{},"Preview backgrounds",": toggle between checkered, white, and dark backgrounds to see how the shape looks in different contexts",[77,242,244],{"id":243},"output","Output",[16,246,247,248,230,251,254],{},"The generator produces a single CSS declaration using ",[23,249,250],{},"clip-path: polygon(...)",[23,252,253],{},"clip-path: path(...)",". You copy this directly into your stylesheet and apply it to any element.",[11,256,258],{"id":257},"understanding-the-css-properties","Understanding the CSS properties",[77,260,261],{"id":25},[23,262,25],{},[16,264,69,265,267],{},[23,266,25],{}," property defines a clipping region that determines which parts of an element are visible. Anything outside the clipping region is hidden.",[269,270,275],"pre",{"className":271,"code":272,"language":273,"meta":274,"style":274},"language-css shiki shiki-themes github-light github-dark",".hexagon {\n  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n}\n","css","",[23,276,277,290,377],{"__ignoreMap":274},[278,279,282,286],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"sScJk",".hexagon",[278,287,289],{"class":288},"sVt8B"," {\n",[278,291,293,297,300,303,306,309,313,316,318,321,324,326,329,331,333,335,337,340,342,344,346,348,351,353,355,358,360,362,364,366,368,370,372,374],{"class":280,"line":292},2,[278,294,296],{"class":295},"sj4cs","  clip-path",[278,298,299],{"class":288},": ",[278,301,302],{"class":295},"polygon",[278,304,305],{"class":288},"(",[278,307,308],{"class":295},"50",[278,310,312],{"class":311},"szBVR","%",[278,314,315],{"class":295}," 0",[278,317,312],{"class":311},[278,319,320],{"class":288},", ",[278,322,323],{"class":295},"100",[278,325,312],{"class":311},[278,327,328],{"class":295}," 25",[278,330,312],{"class":311},[278,332,320],{"class":288},[278,334,323],{"class":295},[278,336,312],{"class":311},[278,338,339],{"class":295}," 75",[278,341,312],{"class":311},[278,343,320],{"class":288},[278,345,308],{"class":295},[278,347,312],{"class":311},[278,349,350],{"class":295}," 100",[278,352,312],{"class":311},[278,354,320],{"class":288},[278,356,357],{"class":295},"0",[278,359,312],{"class":311},[278,361,339],{"class":295},[278,363,312],{"class":311},[278,365,320],{"class":288},[278,367,357],{"class":295},[278,369,312],{"class":311},[278,371,328],{"class":295},[278,373,312],{"class":311},[278,375,376],{"class":288},");\n",[278,378,380],{"class":280,"line":379},3,[278,381,382],{"class":288},"}\n",[16,384,385],{},"This creates a hexagonal visible area. The coordinates are percentages of the element's width and height, making the shape responsive by default.",[16,387,388,390],{},[23,389,25],{}," supports several shape functions:",[82,392,393,399,405,411,417],{},[38,394,395,398],{},[23,396,397],{},"polygon()"," : a series of x,y coordinate pairs",[38,400,401,404],{},[23,402,403],{},"circle()"," : a circle with a radius and centre position",[38,406,407,410],{},[23,408,409],{},"ellipse()"," : an ellipse with x and y radii",[38,412,413,416],{},[23,414,415],{},"path()"," : an SVG path string for complex curves",[38,418,419,422],{},[23,420,421],{},"inset()"," : a rectangular inset",[77,424,426,26,428],{"id":425},"mask-and-mask-image",[23,427,29],{},[23,429,430],{},"mask-image",[16,432,433,434,436,437,439,440,442],{},"For shapes that require smooth curves (blobs, wavy circles), the generator may use ",[23,435,430],{}," with an inline SVG data URI. The ",[23,438,29],{}," property works like ",[23,441,25],{}," but supports alpha transparency, allowing for softer edges and gradient fading effects.",[77,444,446],{"id":445},"browser-support","Browser support",[16,448,449,452,453,455],{},[23,450,451],{},"clip-path: polygon()"," is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The ",[23,454,415],{}," function has been supported since Chrome 88 (2021) and Firefox 97 (2022). For current browser support data, check caniuse.com.",[11,457,459],{"id":458},"common-use-cases","Common use cases",[77,461,463],{"id":462},"profile-pictures-and-avatars","Profile pictures and avatars",[16,465,466,467,470],{},"Clip user profile images into circles, hexagons, or rounded squares. This is cleaner and more flexible than using ",[23,468,469],{},"border-radius: 50%"," for circles, and it works for any shape.",[269,472,474],{"className":271,"code":473,"language":273,"meta":274,"style":274},".avatar {\n  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n  width: 120px;\n  height: 120px;\n}\n",[23,475,476,483,553,569,583],{"__ignoreMap":274},[278,477,478,481],{"class":280,"line":281},[278,479,480],{"class":284},".avatar",[278,482,289],{"class":288},[278,484,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551],{"class":280,"line":292},[278,486,296],{"class":295},[278,488,299],{"class":288},[278,490,302],{"class":295},[278,492,305],{"class":288},[278,494,308],{"class":295},[278,496,312],{"class":311},[278,498,315],{"class":295},[278,500,312],{"class":311},[278,502,320],{"class":288},[278,504,323],{"class":295},[278,506,312],{"class":311},[278,508,328],{"class":295},[278,510,312],{"class":311},[278,512,320],{"class":288},[278,514,323],{"class":295},[278,516,312],{"class":311},[278,518,339],{"class":295},[278,520,312],{"class":311},[278,522,320],{"class":288},[278,524,308],{"class":295},[278,526,312],{"class":311},[278,528,350],{"class":295},[278,530,312],{"class":311},[278,532,320],{"class":288},[278,534,357],{"class":295},[278,536,312],{"class":311},[278,538,339],{"class":295},[278,540,312],{"class":311},[278,542,320],{"class":288},[278,544,357],{"class":295},[278,546,312],{"class":311},[278,548,328],{"class":295},[278,550,312],{"class":311},[278,552,376],{"class":288},[278,554,555,558,560,563,566],{"class":280,"line":379},[278,556,557],{"class":295},"  width",[278,559,299],{"class":288},[278,561,562],{"class":295},"120",[278,564,565],{"class":311},"px",[278,567,568],{"class":288},";\n",[278,570,572,575,577,579,581],{"class":280,"line":571},4,[278,573,574],{"class":295},"  height",[278,576,299],{"class":288},[278,578,562],{"class":295},[278,580,565],{"class":311},[278,582,568],{"class":288},[278,584,586],{"class":280,"line":585},5,[278,587,382],{"class":288},[77,589,591],{"id":590},"sale-badges-and-callouts","Sale badges and callouts",[16,593,594,595,598],{},"Starburst shapes are commonly used for \"SALE,\" \"NEW,\" and \"50% OFF\" badges. The ",[71,596,597],{"href":73},"CSS Shape Generator"," generates clip-path values for starburst shapes with adjustable point count and depth.",[77,600,602],{"id":601},"card-and-container-shapes","Card and container shapes",[16,604,605],{},"Apply subtle polygon or blob shapes to cards, testimonial containers, or pricing boxes. This adds visual distinction without requiring custom images.",[77,607,609],{"id":608},"image-galleries","Image galleries",[16,611,612],{},"Clip gallery images into varied shapes (circle, hexagon, diamond) for a creative, magazine-style layout. This works particularly well with CSS Grid to create tessellated patterns.",[77,614,616],{"id":615},"section-backgrounds","Section backgrounds",[16,618,619,620,623],{},"Apply a wavy or blob clip-path to a full-width ",[23,621,622],{},"\u003Cdiv>"," to create a shaped section background. This achieves the same visual effect as an SVG divider but entirely in CSS.",[11,625,627],{"id":626},"css-shapes-vs-svg-shapes","CSS shapes vs SVG shapes",[16,629,630],{},"Both CSS shapes and SVG shapes achieve similar visual results. Here is when to use each:",[128,632,633,646],{},[131,634,635],{},[134,636,637,640,643],{},[137,638,639],{},"Factor",[137,641,642],{},"CSS shapes",[137,644,645],{},"SVG shapes",[144,647,648,659,670,681,692,703],{},[134,649,650,653,656],{},[149,651,652],{},"File size",[149,654,655],{},"Zero — lives in stylesheet",[149,657,658],{},"Minimal — small SVG strings",[134,660,661,664,667],{},[149,662,663],{},"Complexity",[149,665,666],{},"Best for geometric shapes",[149,668,669],{},"Better for complex organic curves",[134,671,672,675,678],{},[149,673,674],{},"Animation",[149,676,677],{},"CSS transitions and keyframes",[149,679,680],{},"SMIL or CSS animation",[134,682,683,686,689],{},[149,684,685],{},"Interactivity",[149,687,688],{},"Standard CSS hover\u002Ffocus states",[149,690,691],{},"Full DOM manipulation",[134,693,694,697,700],{},[149,695,696],{},"Reusability",[149,698,699],{},"Apply to any element via class",[149,701,702],{},"Requires inline SVG or external file",[134,704,705,707,710],{},[149,706,446],{},[149,708,709],{},"Very broad",[149,711,709],{},[16,713,714,715,719],{},"For simple shapes (polygons, stars, circles), CSS clip-path is the lightest solution. For highly complex organic shapes or shapes that need SMIL animation, the ",[71,716,718],{"href":717},"\u002Ftools\u002Fsvg-shape-generator","SVG Shape Generator"," may be a better fit.",[11,721,723],{"id":722},"tips-for-effective-css-shapes","Tips for effective CSS shapes",[82,725,726,735,741,754,769],{},[38,727,728,731,732,734],{},[41,729,730],{},"Use percentage-based coordinates"," in ",[23,733,397],{}," so shapes scale with their container. Pixel-based coordinates break at different sizes.",[38,736,737,740],{},[41,738,739],{},"Test with real content."," A shape that looks great empty may clip important text or image areas. Always test with actual content inside.",[38,742,743,746,747,749,750,753],{},[41,744,745],{},"Mind the click area."," ",[23,748,25],{}," hides pixels visually but does not change the element's hit area in some browsers. Users may still be able to click outside the visible shape. Use ",[23,751,752],{},"pointer-events"," to control this.",[38,755,756,746,759,762,763,765,766,768],{},[41,757,758],{},"Combine with",[23,760,761],{},"border-radius"," for simple rounded shapes before reaching for ",[23,764,25],{},". If a rounded rectangle or circle is all you need, ",[23,767,761],{}," is simpler and has broader legacy support.",[38,770,771,774],{},[41,772,773],{},"Keep shapes consistent"," across your design. Mixing hexagons, stars, and blobs randomly creates visual chaos. Choose one or two shape families per project.",[11,776,778],{"id":777},"frequently-asked-questions","Frequently asked questions",[16,780,781],{},[41,782,783],{},"1. What is a CSS shape generator?",[16,785,786,787,230,789,791],{},"A CSS shape generator is a visual tool that creates ",[23,788,25],{},[23,790,29],{}," CSS code for non-rectangular shapes. You adjust parameters visually and copy the resulting CSS into your project.",[16,793,794],{},[41,795,796],{},"2. Do CSS shapes affect layout?",[16,798,799],{},"No. The element remains a rectangle in the document flow. Only its visible area is clipped. Surrounding elements are not affected by the clipping.",[16,801,802],{},[41,803,804],{},"3. Can I animate CSS shapes?",[16,806,807,808,810,811,815],{},"Yes. You can transition between two ",[23,809,451],{}," values using CSS transitions, provided both polygons have the same number of points. For morphing blob animations, see the ",[71,812,814],{"href":813},"\u002Ftools\u002Fcss-shape-animator","CSS Shape Animator",".",[16,817,818],{},[41,819,820],{},"4. Is the CSS Shape Generator free?",[16,822,823],{},"Yes. The tool runs entirely in your browser, requires no sign-up, and produces production-ready CSS you can use in any project.",[16,825,826],{},[41,827,828],{},"5. Can I use these shapes in React, Vue, or Angular?",[16,830,831,832,834],{},"Yes. The generator outputs standard CSS that works in any framework. Apply the ",[23,833,25],{}," property to your component's element via a CSS class or inline style.",[11,836,838],{"id":837},"try-the-free-css-shape-generator","Try the free CSS Shape Generator",[16,840,69,841,843],{},[71,842,74],{"href":73}," creates polygons, stars, wavy circles, flowers, blobs, and starbursts with real-time preview and production-ready CSS output. No design skills required.",[16,845,846,847,320,849,320,851,855,856,815],{},"For related tools, explore the ",[71,848,718],{"href":717},[71,850,814],{"href":813},[71,852,854],{"href":853},"\u002Ftools\u002Fcss-gradient-generator","CSS Gradient Generator",", and ",[71,857,859],{"href":858},"\u002Ftools\u002Fcss-gradient-border-generator","CSS Gradient Border Generator",[861,862],"hr",{},[11,864,866],{"id":865},"sources","Sources",[82,868,869,877,888],{},[38,870,871,872,26,874,876],{},"W3C CSS Masking Module Level 1: specification for ",[23,873,25],{},[23,875,29],{}," properties",[38,878,879,880,320,882,320,884,855,886],{},"MDN Web Docs: documentation for ",[23,881,25],{},[23,883,397],{},[23,885,415],{},[23,887,430],{},[38,889,890,891,897],{},"Can I Use (",[71,892,896],{"href":893,"rel":894},"http:\u002F\u002Fcaniuse.com",[895],"nofollow","caniuse.com","): browser support data for CSS clip-path and mask properties",[899,900,901],"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);}",{"title":274,"searchDepth":292,"depth":292,"links":903},[904,905,911,917,924,925,926,927,928],{"id":13,"depth":292,"text":14},{"id":65,"depth":292,"text":66,"children":906},[907,908,909,910],{"id":79,"depth":379,"text":80},{"id":122,"depth":379,"text":123},{"id":221,"depth":379,"text":222},{"id":243,"depth":379,"text":244},{"id":257,"depth":292,"text":258,"children":912},[913,914,916],{"id":25,"depth":379,"text":25},{"id":425,"depth":379,"text":915},"mask and mask-image",{"id":445,"depth":379,"text":446},{"id":458,"depth":292,"text":459,"children":918},[919,920,921,922,923],{"id":462,"depth":379,"text":463},{"id":590,"depth":379,"text":591},{"id":601,"depth":379,"text":602},{"id":608,"depth":379,"text":609},{"id":615,"depth":379,"text":616},{"id":626,"depth":292,"text":627},{"id":722,"depth":292,"text":723},{"id":777,"depth":292,"text":778},{"id":837,"depth":292,"text":838},{"id":865,"depth":292,"text":866},"Tools","2026-06-13","Learn how to create complex CSS shapes using clip-path and mask properties. Generate polygons, wavy circles, flowers, blobs, and starbursts with production-ready code — free, in your browser.",false,"md","\u002Fblog\u002Fcss-shape-generator-guide-2026.webp",{},"CSS Shape Generator: Create Polygons, Blobs & Stars Free (2026)",true,"\u002Fblog\u002Fcss-shape-generator-guide-2026",{"title":5,"description":931},"blog\u002Fcss-shape-generator-guide-2026",[942,943,25,944],"CSS","Web Design","Shape Generator","dhqR_DdBmzheaEQsW5Djq4Bm6J1k6akM3tX3GkJ7sFk",[947,1200,1397],{"id":948,"title":949,"author":6,"body":950,"category":929,"date":1187,"description":1188,"draft":932,"extension":933,"image":1189,"meta":1190,"metaTitle":1191,"navigation":937,"path":1192,"seo":1193,"stem":1194,"tags":1195,"__hash__":1199},"blog\u002Fblog\u002F30-second-favicon-optimisation-checklist-better-brand-recognition.md","The 30-Second Favicon Optimization Checklist",{"type":8,"value":951,"toc":1179},[952,956,959,962,966,969,995,998,1002,1009,1089,1093,1096,1101,1115,1119,1133,1137,1156,1160,1163,1167,1174],[77,953,955],{"id":954},"the-smallest-pixel-real-estate-with-the-biggest-impact","The Smallest Pixel Real Estate with the Biggest Impact",[16,957,958],{},"It measures only a few pixels across, yet the favicon is one of the hardest-working visual assets your brand possesses. Originally designed in the late 1990s merely to differentiate browser tabs, the humble favicon has evolved into a critical element of brand recognition and technical search optimisation. Today, favicon SEO is a legitimate factor in your site's digital presence.",[16,960,961],{},"Search engines like Google now prominently display favicons next to your site's title tag in mobile and desktop Search Engine Results Pages (SERPs). A crisp, highly identifiable favicon can unconsciously influence user trust and potentially increase your organic Click-Through Rate (CTR). Conversely, a blurry, broken, or missing favicon signals amateurism, causing your listing to blend into a sea of generic globe icons. This article provides the ultimate, rapid-fire favicon optimisation checklist to ensure your brand stands out in 2026.",[77,963,965],{"id":964},"why-favicons-matter-for-branding-and-usability","Why Favicons Matter for Branding and Usability",[16,967,968],{},"Favicons serve as the visual anchor for your brand across the web's entire user interface layer. They appear in:",[82,970,971,977,983,989],{},[38,972,973,976],{},[41,974,975],{},"Browser Tabs:"," Helping users navigate when they have dozens of tabs open.",[38,978,979,982],{},[41,980,981],{},"Bookmarks and History:"," Making your site instantly recognisable in saved lists.",[38,984,985,988],{},[41,986,987],{},"Mobile Home Screens:"," Function as app icons when users save your site to their devices.",[38,990,991,994],{},[41,992,993],{},"Google SERPs:"," Acting as a miniature billboard beside your organic search listing.",[16,996,997],{},"When a user scans a crowded SERP, a vibrant, optimised favicon creates visual disruption. Studies in user behaviour indicate that branded visual cues, alongside text snippets, increase trust and draw the eye, directly correlating with improved CTRs.",[77,999,1001],{"id":1000},"the-essential-favicon-sizes-for-modern-devices","The Essential Favicon Sizes for Modern Devices",[16,1003,1004,1005,1008],{},"Creating a single 16x16 ",[23,1006,1007],{},".ico"," file is no longer sufficient. Modern devices, high-DPI displays, and varied operating systems demand a specific set of favicon sizes to ensure crisp rendering in all environments.",[128,1010,1011,1024],{},[131,1012,1013],{},[134,1014,1015,1018,1021],{},[137,1016,1017],{},"Size (Pixels)",[137,1019,1020],{},"Primary Use Case",[137,1022,1023],{},"Format",[144,1025,1026,1039,1051,1064,1076],{},[134,1027,1028,1033,1036],{},[149,1029,1030],{},[41,1031,1032],{},"16x16",[149,1034,1035],{},"Standard desktop browser tabs",[149,1037,1038],{},"ICO or PNG",[134,1040,1041,1046,1049],{},[149,1042,1043],{},[41,1044,1045],{},"32x32",[149,1047,1048],{},"Taskbar shortcut icons, Retina browser tabs",[149,1050,1038],{},[134,1052,1053,1058,1061],{},[149,1054,1055],{},[41,1056,1057],{},"180x180",[149,1059,1060],{},"Apple Touch Icon (iOS home screen saves)",[149,1062,1063],{},"PNG",[134,1065,1066,1071,1074],{},[149,1067,1068],{},[41,1069,1070],{},"192x192",[149,1072,1073],{},"Android \u002F Chrome Web App Manifest",[149,1075,1063],{},[134,1077,1078,1083,1086],{},[149,1079,1080],{},[41,1081,1082],{},"512x512",[149,1084,1085],{},"PWA splash screens, WordPress site icons",[149,1087,1088],{},"PNG or SVG",[77,1090,1092],{"id":1091},"the-30-second-favicon-optimisation-checklist","The 30-Second Favicon Optimisation Checklist",[16,1094,1095],{},"Run your current website through this quick diagnostic checklist to ensure your favicon SEO adheres to 2026 best practices.",[1097,1098,1100],"h4",{"id":1099},"_1-design-for-high-contrast-and-simplicity","1. Design for High Contrast and Simplicity",[82,1102,1103,1109],{},[38,1104,1105,1108],{},[41,1106,1107],{},"Minimise text:"," A favicon is too small to read words. Use your brand's monogram or a highly simplified version of your primary logo mark.",[38,1110,1111,1114],{},[41,1112,1113],{},"Check dark\u002Flight modes:"," Ensure your favicon has enough contrast to be visible on both white browser tabs and dark-mode charcoal tabs. Using a solid background or a subtle stroke can prevent your logo from disappearing.",[1097,1116,1118],{"id":1117},"_2-export-in-the-correct-formats-and-sizes","2. Export in the Correct Formats and Sizes",[82,1120,1121,1127],{},[38,1122,1123,1126],{},[41,1124,1125],{},"SVG vs PNG\u002FICO:"," While SVG is excellent for scalability, always provide the standard PNG and ICO fallbacks to ensure compatibility across older browsers and strict search engine crawlers.",[38,1128,1129,1132],{},[41,1130,1131],{},"Generate the required suite:"," 16x16, 32x32, 180x180, and 192x192.",[1097,1134,1136],{"id":1135},"_3-implement-the-code-correctly","3. Implement the Code Correctly",[82,1138,1139,1153],{},[38,1140,1141,1142,1145,1146,26,1149,1152],{},"Ensure your HTML ",[23,1143,1144],{},"\u003Chead>"," contains the proper ",[23,1147,1148],{},"rel=\"icon\"",[23,1150,1151],{},"rel=\"apple-touch-icon\""," Tags pointing to absolute URLs.",[38,1154,1155],{},"Verify that the image files are accessible to search engine crawlers (do not block them in your robots.txt).",[77,1157,1159],{"id":1158},"common-favicon-mistakes-to-avoid","Common Favicon Mistakes to Avoid",[16,1161,1162],{},"The most common error in favicon optimisation is using a complex, detailed logo that becomes an unrecognisable blur when downscaled to 16x16 pixels. Another major technical mistake is placing the favicon in an obscure subdirectory that Googlebot can't crawl, resulting in the default search engine icon appearing next to your SERP listing.",[77,1164,1166],{"id":1165},"streamline-the-process","Streamline the Process",[16,1168,1169,1170,1173],{},"Generating the precise HTML tags and appropriately sized image variations can be tedious. Instead of manually exporting a dozen different PNG files from your design software, use the ",[41,1171,1172],{},"CampaignMorph Favicon Creator",". Simply upload your high-resolution master logo, and the tool will automatically generate all required sizes (16x16 through 512x512) along with the exact HTML snippet for perfect cross-device compatibility and maximum SEO impact.",[16,1175,1176],{},[41,1177,1178],{},"Favicon optimisation is one of the highest ROI tasks in technical SEO. In just thirty seconds, you can verify your sizes, contrast, and code, ensuring your brand presents a polished, authoritative front in browser tabs and search engine results alike. Don't let your listing get lost in the shuffle; generate a pristine, multi-device favicon package today using the CampaignMorph Favicon Creator.",{"title":274,"searchDepth":292,"depth":292,"links":1180},[1181,1182,1183,1184,1185,1186],{"id":954,"depth":379,"text":955},{"id":964,"depth":379,"text":965},{"id":1000,"depth":379,"text":1001},{"id":1091,"depth":379,"text":1092},{"id":1158,"depth":379,"text":1159},{"id":1165,"depth":379,"text":1166},"2026-04-22","Use this quick favicon checklist to improve brand recognition in search, tabs, and bookmarks. Covers sizes, formats, naming, and implementation tips.","\u002Fblog\u002F30-second-favicon-optimization-checklist-better-brand-recognition.webp",{},"30-Second Favicon Optimization Checklist","\u002Fblog\u002F30-second-favicon-optimisation-checklist-better-brand-recognition",{"title":949,"description":1188},"blog\u002F30-second-favicon-optimisation-checklist-better-brand-recognition",[1196,1197,1198],"Favicon","SEO","Branding","XAOnZNOxXZzAd8PbE87gPdTawKodiucVu4ObF4ovxWI",{"id":1201,"title":1202,"author":6,"body":1203,"category":929,"date":1385,"description":1386,"draft":932,"extension":933,"image":1387,"meta":1388,"metaTitle":1202,"navigation":937,"path":1389,"seo":1390,"stem":1391,"tags":1392,"__hash__":1396},"blog\u002Fblog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows.md","CMYK to RGB Conversion Guide for Marketers",{"type":8,"value":1204,"toc":1378},[1205,1209,1212,1215,1219,1222,1226,1234,1238,1245,1249,1252,1272,1276,1279,1283,1290,1294,1301,1305,1308,1312,1373],[77,1206,1208],{"id":1207},"the-colour-shift-dilemma","The Colour Shift Dilemma",[16,1210,1211],{},"Every seasoned designer and brand manager has experienced the sinking feeling of the \"colour shift.\" A beautifully crafted brochure, featuring deep, rich branding, is digitised for a website or social media campaign. But when viewed on a monitor, the vibrant reds look muted, the crisp blues appear neon, and the blacks turn into a muddy dark grey. This frustrating scenario is the direct result of a failed print-to-digital colour conversion.",[16,1213,1214],{},"Bridging the gap between the physical printing press and the digital screen requires a fundamental understanding of colour science. Transitioning assets from print campaigns to digital ecosystems is a daily reality for modern marketing teams, making CMYK-to-RGB conversion a mandatory technical skill. This comprehensive guide explains the differences between these critical colour spaces, why conversions often fail, and how to achieve flawless digital reproductions every time.",[77,1216,1218],{"id":1217},"understanding-the-core-difference-cmyk-vs-rgb","Understanding the Core Difference: CMYK vs RGB",[16,1220,1221],{},"To understand why colour format conversion is so challenging, we must look at how colour is physically produced in both media.",[1097,1223,1225],{"id":1224},"cmyk-subtractive-colour","CMYK (Subtractive Colour)",[16,1227,1228,1229,1233],{},"CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is the standard colour model used in offset and digital printing. It is a ",[1230,1231,1232],"em",{},"subtractive"," process: it starts with a white piece of paper, and ink is added to subtract (absorb) the light bouncing off the page. The more ink you add, the darker the result. Mixing all colours produces black.",[1097,1235,1237],{"id":1236},"rgb-additive-colour","RGB (Additive Colour)",[16,1239,1240,1241,1244],{},"RGB stands for Red, Green, and Blue. This model is used in digital screens, smartphones, and televisions. It is an ",[1230,1242,1243],{},"additive"," process: it starts with a black screen, and light is added via pixels. The more light you add, the brighter the result. Mixing all colours at full intensity produces pure white.",[77,1246,1248],{"id":1247},"why-print-to-digital-conversion-often-fails","Why Print-to-Digital Conversion Often Fails",[16,1250,1251],{},"Directly exporting a CMYK file for digital use frequently results in highly inaccurate, unappealing colours. This happens for several technical reasons:",[82,1253,1254,1260,1266],{},[38,1255,1256,1259],{},[41,1257,1258],{},"Gamut Differences:"," A \"colour gamut\" is the total range of colours a specific device can produce. The RGB gamut is significantly larger than the CMYK gamut. Screens can produce vibrant, luminescent neon colours that physical ink simply cannot replicate. Conversely, when converting CMYK files back to RGB, standard design software often struggles to mathematically remap the restricted ink values to the full range of bright pixel values, resulting in dullness.",[38,1261,1262,1265],{},[41,1263,1264],{},"Rich Black Issues:"," In CMYK, true, deep black (Rich Black) requires a mixture of multiple inks (e.g., C:60, M:40, Y:40, K:100). In RGB, absolute black is simply R:0, G:0, B:0. Improper conversion often turns CMYK black into an unappealing dark grey on screens.",[38,1267,1268,1271],{},[41,1269,1270],{},"Colour Profiles:"," Different devices use different ICC colour profiles (like SWOP for print and sRGB for web). Ignoring these profiles during conversion leads to drastic shifts in hue and saturation.",[77,1273,1275],{"id":1274},"the-conversion-workflow-and-quality-control","The Conversion Workflow and Quality Control",[16,1277,1278],{},"A professional print-to-digital workflow requires more than just changing a dropdown menu in a design tool. It requires careful mapping.",[1097,1280,1282],{"id":1281},"_1-use-the-right-tools","1. Use the Right Tools",[16,1284,1285,1286,1289],{},"While heavy-duty design software handles complex profile conversions, marketers often need a fast, reliable, and mathematically accurate way to convert specific hex or colour values without having to boot up resource-intensive applications. For this, utilise the ",[41,1287,1288],{},"CampaignMorph Colour Converters",". This suite allows you to input your exact CMYK values and instantly retrieve the closest web-safe RGB and HEX equivalents, taking the guesswork out of translating brand guidelines for CSS implementation.",[1097,1291,1293],{"id":1292},"_2-standardise-to-srgb","2. Standardise to sRGB",[16,1295,1296,1297,1300],{},"When converting for web use, always target the ",[41,1298,1299],{},"sRGB"," colour profile. While Adobe RGB or Display P3 offer wider colour ranges, sRGB is the universal standard for web browsers. If you save an image in Adobe RGB, it may look stunning on your professional monitor, but it will look completely washed out on a standard user's smartphone or an older browser.",[1097,1302,1304],{"id":1303},"_3-test-across-environments","3. Test Across Environments",[16,1306,1307],{},"Monitors vary wildly in their colour calibration. A converted RGB file might look perfect on an Apple Retina display but appear overly saturated on an inexpensive office monitor. Always test your converted digital assets across multiple devices (an iPhone, an Android device, a standard laptop screen) and various web browsers to ensure visual consistency.",[77,1309,1311],{"id":1310},"common-conversion-problems-and-fixes","Common Conversion Problems and Fixes",[128,1313,1314,1327],{},[131,1315,1316],{},[134,1317,1318,1321,1324],{},[137,1319,1320],{},"The Problem",[137,1322,1323],{},"The Cause",[137,1325,1326],{},"The Fix",[144,1328,1329,1340,1351,1362],{},[134,1330,1331,1334,1337],{},[149,1332,1333],{},"Blacks look like washed-out dark grey.",[149,1335,1336],{},"CMYK standard black (100K) converting to RGB grey.",[149,1338,1339],{},"Manually force black elements to HEX #000000 or RGB (0,0,0).",[134,1341,1342,1345,1348],{},[149,1343,1344],{},"Blues appear slightly purple on screen.",[149,1346,1347],{},"Cyan\u002FMagenta mix mismatch in sRGB translation.",[149,1349,1350],{},"Reduce the red channel slightly in the RGB mix to cool down the blue.",[134,1352,1353,1356,1359],{},[149,1354,1355],{},"The overall image looks dull and lifeless.",[149,1357,1358],{},"CMYK's smaller gamut restricts the RGB output.",[149,1360,1361],{},"Apply a slight global saturation and vibrance boost post-conversion.",[134,1363,1364,1367,1370],{},[149,1365,1366],{},"Colours look totally different in Chrome vs Safari.",[149,1368,1369],{},"Image saved without an embedded sRGB profile.",[149,1371,1372],{},"Always check \"Embed Colour Profile (sRGB)\" upon final web export.",[16,1374,1375],{},[41,1376,1377],{},"In a multi-channel marketing environment, maintaining brand integrity means ensuring your corporate colours look as striking on a mobile phone as they do on a printed billboard. CMYK to RGB conversion is a nuanced process fraught with gamut limitations and profile errors. By understanding the science of additive and subtractive colour, leveraging the CampaignMorph Colour Converters for precise value translation, and rigorously testing, you can conquer colour shift and deliver a flawless, unified brand experience across every digital touchpoint.",{"title":274,"searchDepth":292,"depth":292,"links":1379},[1380,1381,1382,1383,1384],{"id":1207,"depth":379,"text":1208},{"id":1217,"depth":379,"text":1218},{"id":1247,"depth":379,"text":1248},{"id":1274,"depth":379,"text":1275},{"id":1310,"depth":379,"text":1311},"2026-04-26","Learn how CMYK to RGB conversion works, why colours shift, and how to keep brand colours consistent across print, web, and social assets.","\u002Fblog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows.webp",{},"\u002Fblog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows",{"title":1202,"description":1386},"blog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows",[1393,1394,1395],"Color Conversion","Print Design","Digital Design","DeHsWw6gf9Sz6Qvqs9ymfFUVmwbxuC1zWucDj6UvBnQ",{"id":1398,"title":1399,"author":6,"body":1400,"category":929,"date":2393,"description":2394,"draft":932,"extension":933,"image":2395,"meta":2396,"metaTitle":2397,"navigation":937,"path":2398,"seo":2399,"stem":2400,"tags":2401,"__hash__":2405},"blog\u002Fblog\u002Fcss-marquee-generator-guide-2026.md","How to Create CSS Marquee Scrolling Effects: The Modern Way Without the Deprecated Tag",{"type":8,"value":1401,"toc":2359},[1402,1410,1416,1419,1422,1465,1468,1472,1479,1483,1487,1490,1494,1497,1501,1504,1508,1577,1579,1582,1599,1602,1606,1610,1613,1720,1723,1727,1867,1873,1887,1891,1897,1987,1990,1994,2009,2011,2015,2018,2021,2044,2048,2051,2055,2058,2062,2065,2069,2072,2076,2079,2085,2088,2128,2132,2137,2145,2152,2156,2159,2163,2199,2201,2211,2216,2221,2232,2237,2240,2245,2248,2253,2256,2266,2296,2299,2303,2308,2318,2320,2322,2356],[11,1403,1405,1406,1409],{"id":1404},"the-marquee-is-back-but-the-marquee-tag-is-not","The marquee is back,  but the ",[23,1407,1408],{},"\u003Cmarquee>"," tag is not",[16,1411,1412,1413,1415],{},"If you have been building websites long enough, you remember the HTML ",[23,1414,1408],{}," tag. Introduced in Internet Explorer in the 1990s, it scrolled text horizontally across the screen. It was widely used, universally disliked by designers, and eventually deprecated by the HTML specification. No modern browser vendor recommends using it.",[16,1417,1418],{},"But the visual effect of a continuous horizontal scroll of content is more popular than ever. Open any modern SaaS landing page, and you will likely see a logo bar scrolling smoothly across the screen, showcasing client logos, partner brands, or technology stack icons. This is the marquee effect, rebuilt properly with CSS animations.",[16,1420,1421],{},"The modern CSS marquee is:",[82,1423,1424,1434,1444,1459],{},[38,1425,1426,1429,1430,1433],{},[41,1427,1428],{},"Performant."," It uses CSS ",[23,1431,1432],{},"transform: translateX()"," animations, which are GPU-composited and run at 60fps without blocking the main thread.",[38,1435,1436,1439,1440,1443],{},[41,1437,1438],{},"Accessible."," It respects ",[23,1441,1442],{},"prefers-reduced-motion"," settings when implemented correctly.",[38,1445,1446,1449,1450,320,1452,320,1455,1458],{},[41,1447,1448],{},"Semantic."," It uses standard HTML elements (",[23,1451,622],{},[23,1453,1454],{},"\u003Cspan>",[23,1456,1457],{},"\u003Cimg>",") instead of a deprecated proprietary tag.",[38,1460,1461,1464],{},[41,1462,1463],{},"Flexible."," It works with text, images, cards, or any HTML content.",[16,1466,1467],{},"The complexity lies in the CSS setup. An infinite scroll effect requires duplicating the content to create a seamless loop, calculating the translation distance based on content width, and handling edge fading. This is tedious to write from scratch, especially when you need multiple marquees with different speeds and directions.",[11,1469,1471],{"id":1470},"what-does-the-css-marquee-generator-do","What does the CSS Marquee Generator do?",[16,1473,69,1474,1478],{},[71,1475,1477],{"href":1476},"\u002Ftools\u002Fcss-marquee-generator","CampaignMorph CSS Marquee Generator"," generates production-ready HTML and CSS for infinite-scrolling marquees. You configure the behaviour visually and copy the code.",[77,1480,1482],{"id":1481},"three-content-modes","Three content modes",[1097,1484,1486],{"id":1485},"text-mode","Text mode",[16,1488,1489],{},"Enter custom text that scrolls continuously. Useful for announcements, ticker-style messages, or decorative text bands.",[1097,1491,1493],{"id":1492},"logo-mode","Logo mode",[16,1495,1496],{},"Preview with placeholder logo tiles. Replace the placeholder images with your actual logo files in the exported HTML. This is the most common use case for client\u002Fpartner logo bars.",[1097,1498,1500],{"id":1499},"card-mode","Card mode",[16,1502,1503],{},"Preview with card-style elements. Replace with your actual card components for scrolling testimonials, product features, or team members.",[77,1505,1507],{"id":1506},"configuration-options","Configuration options",[128,1509,1510,1519],{},[131,1511,1512],{},[134,1513,1514,1517],{},[137,1515,1516],{},"Option",[137,1518,142],{},[144,1520,1521,1529,1537,1545,1553,1561,1569],{},[134,1522,1523,1526],{},[149,1524,1525],{},"Direction",[149,1527,1528],{},"Left, right, up, or down scrolling",[134,1530,1531,1534],{},[149,1532,1533],{},"Speed",[149,1535,1536],{},"Duration of one complete scroll cycle (in seconds)",[134,1538,1539,1542],{},[149,1540,1541],{},"Gap",[149,1543,1544],{},"Spacing between items (in pixels)",[134,1546,1547,1550],{},[149,1548,1549],{},"Angle",[149,1551,1552],{},"Rotation of the entire marquee (for diagonal scrolling effects)",[134,1554,1555,1558],{},[149,1556,1557],{},"Pause on hover",[149,1559,1560],{},"Whether the animation pauses when the user hovers over the marquee",[134,1562,1563,1566],{},[149,1564,1565],{},"Fade edges",[149,1567,1568],{},"Whether gradient masks are applied at the start and end to create a smooth fade-in\u002Ffade-out",[134,1570,1571,1574],{},[149,1572,1573],{},"Fade size",[149,1575,1576],{},"Width of the fade zones (in pixels)",[77,1578,244],{"id":243},[16,1580,1581],{},"The generator produces two code blocks:",[35,1583,1584,1593],{},[38,1585,1586,1588,1589,1592],{},[41,1587,942],{},": the complete stylesheet including CSS custom properties, the ",[23,1590,1591],{},"@keyframes"," animation, and optional mask gradients",[38,1594,1595,1598],{},[41,1596,1597],{},"HTML",": the markup structure with the duplicated content needed for seamless looping",[16,1600,1601],{},"Both code blocks are copy-ready. Paste them into your project and replace the placeholder content with your actual text, images, or components.",[11,1603,1605],{"id":1604},"how-does-the-css-marquee-technique-work","How does the CSS marquee technique work?",[77,1607,1609],{"id":1608},"the-duplication-trick","The duplication trick",[16,1611,1612],{},"The core of the infinite scroll effect is content duplication. The visible content is placed inside a container twice:",[269,1614,1618],{"className":1615,"code":1616,"language":1617,"meta":274,"style":274},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"marquee-container\">\n  \u003Cdiv class=\"marquee-content\">\n    \u003C!-- Your items here -->\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"marquee-content\" aria-hidden=\"true\">\n    \u003C!-- Same items duplicated -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[23,1619,1620,1642,1658,1664,1673,1695,1701,1710],{"__ignoreMap":274},[278,1621,1622,1625,1629,1632,1635,1639],{"class":280,"line":281},[278,1623,1624],{"class":288},"\u003C",[278,1626,1628],{"class":1627},"s9eBZ","div",[278,1630,1631],{"class":284}," class",[278,1633,1634],{"class":288},"=",[278,1636,1638],{"class":1637},"sZZnC","\"marquee-container\"",[278,1640,1641],{"class":288},">\n",[278,1643,1644,1647,1649,1651,1653,1656],{"class":280,"line":292},[278,1645,1646],{"class":288},"  \u003C",[278,1648,1628],{"class":1627},[278,1650,1631],{"class":284},[278,1652,1634],{"class":288},[278,1654,1655],{"class":1637},"\"marquee-content\"",[278,1657,1641],{"class":288},[278,1659,1660],{"class":280,"line":379},[278,1661,1663],{"class":1662},"sJ8bj","    \u003C!-- Your items here -->\n",[278,1665,1666,1669,1671],{"class":280,"line":571},[278,1667,1668],{"class":288},"  \u003C\u002F",[278,1670,1628],{"class":1627},[278,1672,1641],{"class":288},[278,1674,1675,1677,1679,1681,1683,1685,1688,1690,1693],{"class":280,"line":585},[278,1676,1646],{"class":288},[278,1678,1628],{"class":1627},[278,1680,1631],{"class":284},[278,1682,1634],{"class":288},[278,1684,1655],{"class":1637},[278,1686,1687],{"class":284}," aria-hidden",[278,1689,1634],{"class":288},[278,1691,1692],{"class":1637},"\"true\"",[278,1694,1641],{"class":288},[278,1696,1698],{"class":280,"line":1697},6,[278,1699,1700],{"class":1662},"    \u003C!-- Same items duplicated -->\n",[278,1702,1704,1706,1708],{"class":280,"line":1703},7,[278,1705,1668],{"class":288},[278,1707,1628],{"class":1627},[278,1709,1641],{"class":288},[278,1711,1713,1716,1718],{"class":280,"line":1712},8,[278,1714,1715],{"class":288},"\u003C\u002F",[278,1717,1628],{"class":1627},[278,1719,1641],{"class":288},[16,1721,1722],{},"Both copies sit side by side. The CSS animation translates both copies leftward by 100% of one copy's width. When the first copy scrolls fully off-screen, the second copy is in exactly the position the first started,  creating a seamless, infinite loop.",[77,1724,1726],{"id":1725},"the-animation","The animation",[269,1728,1730],{"className":271,"code":1729,"language":273,"meta":274,"style":274},"@keyframes scroll {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n\n.marquee-content {\n  animation: scroll var(--marquee-duration) linear infinite;\n}\n",[23,1731,1732,1742,1749,1765,1770,1777,1811,1815,1819,1825,1833,1862],{"__ignoreMap":274},[278,1733,1734,1736,1740],{"class":280,"line":281},[278,1735,1591],{"class":311},[278,1737,1739],{"class":1738},"s4XuR"," scroll",[278,1741,289],{"class":288},[278,1743,1744,1747],{"class":280,"line":292},[278,1745,1746],{"class":284},"  from",[278,1748,289],{"class":288},[278,1750,1751,1754,1756,1759,1761,1763],{"class":280,"line":379},[278,1752,1753],{"class":295},"    transform",[278,1755,299],{"class":288},[278,1757,1758],{"class":295},"translateX",[278,1760,305],{"class":288},[278,1762,357],{"class":295},[278,1764,376],{"class":288},[278,1766,1767],{"class":280,"line":571},[278,1768,1769],{"class":288},"  }\n",[278,1771,1772,1775],{"class":280,"line":585},[278,1773,1774],{"class":284},"  to",[278,1776,289],{"class":288},[278,1778,1779,1781,1783,1785,1787,1790,1792,1795,1797,1800,1803,1805,1808],{"class":280,"line":1697},[278,1780,1753],{"class":295},[278,1782,299],{"class":288},[278,1784,1758],{"class":295},[278,1786,305],{"class":288},[278,1788,1789],{"class":295},"calc",[278,1791,305],{"class":288},[278,1793,1794],{"class":295},"-100",[278,1796,312],{"class":311},[278,1798,1799],{"class":311}," -",[278,1801,1802],{"class":295}," var",[278,1804,305],{"class":288},[278,1806,1807],{"class":1738},"--marquee-gap",[278,1809,1810],{"class":288},")));\n",[278,1812,1813],{"class":280,"line":1703},[278,1814,1769],{"class":288},[278,1816,1817],{"class":280,"line":1712},[278,1818,382],{"class":288},[278,1820,1822],{"class":280,"line":1821},9,[278,1823,1824],{"emptyLinePlaceholder":937},"\n",[278,1826,1828,1831],{"class":280,"line":1827},10,[278,1829,1830],{"class":284},".marquee-content",[278,1832,289],{"class":288},[278,1834,1836,1839,1841,1844,1846,1848,1851,1854,1857,1860],{"class":280,"line":1835},11,[278,1837,1838],{"class":295},"  animation",[278,1840,299],{"class":288},[278,1842,1843],{"class":295},"scroll",[278,1845,1802],{"class":295},[278,1847,305],{"class":288},[278,1849,1850],{"class":1738},"--marquee-duration",[278,1852,1853],{"class":288},") ",[278,1855,1856],{"class":295},"linear",[278,1858,1859],{"class":295}," infinite",[278,1861,568],{"class":288},[278,1863,1865],{"class":280,"line":1864},12,[278,1866,382],{"class":288},[16,1868,69,1869,1872],{},[23,1870,1871],{},"translateX(calc(-100% - var(--marquee-gap)))"," accounts for both the content width and the gap between items, ensuring the loop is perfectly seamless.",[16,1874,1875,1876,1879,1880,230,1883,1886],{},"Using ",[23,1877,1878],{},"transform"," rather than ",[23,1881,1882],{},"left",[23,1884,1885],{},"margin-left"," is critical for performance. The GPU compositor handles CSS transforms and does not trigger layout recalculations.",[77,1888,1890],{"id":1889},"edge-fading-with-css-masks","Edge fading with CSS masks",[16,1892,1893,1894,1896],{},"The fade effect at the edges is achieved with CSS ",[23,1895,430],{},":",[269,1898,1900],{"className":271,"code":1899,"language":273,"meta":274,"style":274},".marquee-container {\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black 100px,\n    black calc(100% - 100px),\n    transparent\n  );\n}\n",[23,1901,1902,1909,1922,1933,1940,1951,1973,1978,1983],{"__ignoreMap":274},[278,1903,1904,1907],{"class":280,"line":281},[278,1905,1906],{"class":284},".marquee-container",[278,1908,289],{"class":288},[278,1910,1911,1914,1916,1919],{"class":280,"line":292},[278,1912,1913],{"class":295},"  mask-image",[278,1915,299],{"class":288},[278,1917,1918],{"class":295},"linear-gradient",[278,1920,1921],{"class":288},"(\n",[278,1923,1924,1927,1930],{"class":280,"line":379},[278,1925,1926],{"class":311},"    to",[278,1928,1929],{"class":295}," right",[278,1931,1932],{"class":288},",\n",[278,1934,1935,1938],{"class":280,"line":571},[278,1936,1937],{"class":295},"    transparent",[278,1939,1932],{"class":288},[278,1941,1942,1945,1947,1949],{"class":280,"line":585},[278,1943,1944],{"class":295},"    black",[278,1946,350],{"class":295},[278,1948,565],{"class":311},[278,1950,1932],{"class":288},[278,1952,1953,1955,1958,1960,1962,1964,1966,1968,1970],{"class":280,"line":1697},[278,1954,1944],{"class":295},[278,1956,1957],{"class":295}," calc",[278,1959,305],{"class":288},[278,1961,323],{"class":295},[278,1963,312],{"class":311},[278,1965,1799],{"class":311},[278,1967,350],{"class":295},[278,1969,565],{"class":311},[278,1971,1972],{"class":288},"),\n",[278,1974,1975],{"class":280,"line":1703},[278,1976,1977],{"class":295},"    transparent\n",[278,1979,1980],{"class":280,"line":1712},[278,1981,1982],{"class":288},"  );\n",[278,1984,1985],{"class":280,"line":1821},[278,1986,382],{"class":288},[16,1988,1989],{},"This creates a gradient mask that fades the content to transparent at the left and right edges, preventing the hard visual cut where content appears and disappears.",[77,1991,1993],{"id":1992},"vertical-scrolling","Vertical scrolling",[16,1995,1996,1997,2000,2001,2004,2005,2008],{},"For vertical marquees (scrolling up or down), the same technique applies, but the container uses",[23,1998,1999],{},"flex-direction: column",", and the animation uses ",[23,2002,2003],{},"translateY()"," instead of ",[23,2006,2007],{},"translateX()",". The container needs a fixed height so the content can scroll within it.",[11,2010,459],{"id":458},[77,2012,2014],{"id":2013},"client-and-partner-logo-bars","Client and partner logo bars",[16,2016,2017],{},"The most popular use case. A horizontal strip of logo images scrolls continuously, showing that well-known companies use your product. This is a trust signal on SaaS landing pages, agency websites, and portfolio sites.",[16,2019,2020],{},"Best practices:",[82,2022,2023,2026,2034,2037],{},[38,2024,2025],{},"Use PNG or SVG logos with transparent backgrounds",[38,2027,2028,2029,2033],{},"Convert logos to a consistent height (40–60px) before adding them. Use the ",[71,2030,2032],{"href":2031},"\u002Ftools\u002Fimage-resizer","Image Resizer"," to batch-resize",[38,2035,2036],{},"Keep the animation speed moderate (15–25 seconds per cycle) — too fast feels frantic",[38,2038,2039,2040,2043],{},"Add ",[23,2041,2042],{},"pause on hover"," so users can read the logos",[77,2045,2047],{"id":2046},"news-ticker-and-announcements","News ticker and announcements",[16,2049,2050],{},"A scrolling text band for announcements, promotions, or live updates. This is commonly seen at the top of e-commerce sites (\"Free shipping on orders over $50 • New collection available • Sale ends Sunday\").",[77,2052,2054],{"id":2053},"testimonial-scrollers","Testimonial scrollers",[16,2056,2057],{},"Scrolling testimonial cards create a dynamic social proof section. Each card contains a quote, the author's name, and an optional photo. The continuous scroll implies a large volume of positive feedback.",[77,2059,2061],{"id":2060},"technology-stack-display","Technology stack display",[16,2063,2064],{},"Developer-focused landing pages use logo marquees to show supported technologies, integrations, or frameworks. This is functionally identical to the client logo bar but with technology icons.",[77,2066,2068],{"id":2067},"event-sponsor-displays","Event sponsor displays",[16,2070,2071],{},"Event websites and conference pages use scrolling sponsor logos, often tiered by sponsorship level (platinum sponsors scroll larger, bronze sponsors scroll smaller).",[11,2073,2075],{"id":2074},"accessibility-considerations","Accessibility considerations",[16,2077,2078],{},"Continuous motion can be problematic for users with vestibular disorders or motion sensitivity. Follow these guidelines:",[77,2080,2082,2083],{"id":2081},"respect-prefers-reduced-motion","Respect ",[23,2084,1442],{},[16,2086,2087],{},"Always include a media query that pauses or turns off the animation for users who have enabled reduced motion in their operating system settings:",[269,2089,2091],{"className":271,"code":2090,"language":273,"meta":274,"style":274},"@media (prefers-reduced-motion: reduce) {\n  .marquee-content {\n    animation-play-state: paused;\n  }\n}\n",[23,2092,2093,2101,2108,2120,2124],{"__ignoreMap":274},[278,2094,2095,2098],{"class":280,"line":281},[278,2096,2097],{"class":311},"@media",[278,2099,2100],{"class":288}," (prefers-reduced-motion: reduce) {\n",[278,2102,2103,2106],{"class":280,"line":292},[278,2104,2105],{"class":284},"  .marquee-content",[278,2107,289],{"class":288},[278,2109,2110,2113,2115,2118],{"class":280,"line":379},[278,2111,2112],{"class":295},"    animation-play-state",[278,2114,299],{"class":288},[278,2116,2117],{"class":295},"paused",[278,2119,568],{"class":288},[278,2121,2122],{"class":280,"line":571},[278,2123,1769],{"class":288},[278,2125,2126],{"class":280,"line":585},[278,2127,382],{"class":288},[77,2129,2131],{"id":2130},"provide-pause-controls","Provide pause controls",[16,2133,69,2134,2136],{},[23,2135,2042],{}," feature built into the generator allows mouse users to stop the animation. For keyboard and touch users, consider adding an explicit pause\u002Fplay button.",[77,2138,2140,2141,2144],{"id":2139},"use-aria-hidden-on-the-duplicate","Use ",[23,2142,2143],{},"aria-hidden"," on the duplicate",[16,2146,2147,2148,2151],{},"The duplicated content exists only for the visual loop effect. Mark it with ",[23,2149,2150],{},"aria-hidden=\"true\""," so screen readers do not read the same content twice. The generated HTML includes this attribute automatically.",[77,2153,2155],{"id":2154},"do-not-rely-on-marquee-content-for-critical-information","Do not rely on marquee content for critical information",[16,2157,2158],{},"If the scrolling text contains essential information (pricing, deadlines, legal notices), also present that information in a static format elsewhere on the page. Users who have motion disabled or who use screen readers should not miss important content.",[11,2160,2162],{"id":2161},"tips-for-effective-marquees","Tips for effective marquees",[82,2164,2165,2171,2177,2183,2189],{},[38,2166,2167,2170],{},[41,2168,2169],{},"Moderate speed."," 15–25 seconds per cycle is the sweet spot. Faster feels anxious; slower feels broken.",[38,2172,2173,2176],{},[41,2174,2175],{},"Consistent item sizes."," In logo bars, resize all logos to the same height for visual consistency. Different-sized logos look unprofessional.",[38,2178,2179,2182],{},[41,2180,2181],{},"Use edge fading."," The gradient mask at the edges prevents the jarring appearance and disappearance of items, making the scroll feel polished.",[38,2184,2185,2188],{},[41,2186,2187],{},"Limit to one or two per page."," Multiple marquees competing for attention reduce the effectiveness of each one.",[38,2190,2191,2194,2195,2198],{},[41,2192,2193],{},"Mobile test."," Ensure the marquee does not create horizontal overflow. Set ",[23,2196,2197],{},"overflow: hidden"," on the container.",[11,2200,778],{"id":777},[16,2202,2203,746,2206,746,2208],{},[41,2204,2205],{},"1. Is the HTML",[23,2207,1408],{},[41,2209,2210],{},"tag still supported?",[16,2212,69,2213,2215],{},[23,2214,1408],{}," tag still renders in most browsers for backward compatibility, but it is officially deprecated in the HTML specification. It is not recommended for use. Modern CSS animations achieve the same effect with better performance, accessibility, and control.",[16,2217,2218],{},[41,2219,2220],{},"2. Can I create a vertical scrolling marquee?",[16,2222,2223,2224,2227,2228,2004,2230,815],{},"Yes. The ",[71,2225,2226],{"href":1476},"CSS Marquee Generator"," supports four directions: left, right, up, and down. Vertical marquees use ",[23,2229,2003],{},[23,2231,2007],{},[16,2233,2234],{},[41,2235,2236],{},"3. Does the marquee work without JavaScript?",[16,2238,2239],{},"Yes. The generated marquee is pure CSS. No JavaScript is required for the animation itself. The only case where JavaScript helps is adding a programmatic pause\u002Fplay button.",[16,2241,2242],{},[41,2243,2244],{},"4. Is the CSS Marquee Generator free?",[16,2246,2247],{},"Yes. The tool runs in your browser, requires no sign-up, and produces production-ready HTML and CSS with no watermarks or usage limits.",[16,2249,2250],{},[41,2251,2252],{},"5. Can I use the marquee in React, Vue, or Angular?",[16,2254,2255],{},"Yes. The generated HTML and CSS work in any framework. Copy the CSS into your stylesheet and adapt the HTML to your component structure.",[16,2257,2258,2261,2262,2265],{},[41,2259,2260],{},"6. How do I make the marquee pause on hover?","\nAdd ",[23,2263,2264],{},"animation-play-state: paused"," on hover:",[269,2267,2269],{"className":271,"code":2268,"language":273,"meta":274,"style":274},".marquee-container:hover .marquee-content {\n  animation-play-state: paused;\n}\n",[23,2270,2271,2281,2292],{"__ignoreMap":274},[278,2272,2273,2276,2279],{"class":280,"line":281},[278,2274,2275],{"class":284},".marquee-container:hover",[278,2277,2278],{"class":284}," .marquee-content",[278,2280,289],{"class":288},[278,2282,2283,2286,2288,2290],{"class":280,"line":292},[278,2284,2285],{"class":295},"  animation-play-state",[278,2287,299],{"class":288},[278,2289,2117],{"class":295},[278,2291,568],{"class":288},[278,2293,2294],{"class":280,"line":379},[278,2295,382],{"class":288},[16,2297,2298],{},"The generator includes this automatically when the \"Pause on hover\" option is enabled.",[11,2300,2302],{"id":2301},"try-the-free-css-marquee-generator","Try the free CSS Marquee Generator.",[16,2304,69,2305,2307],{},[71,2306,1477],{"href":1476}," creates modern, high-performance infinite-scrolling marquees with complete HTML and CSS output. Configure direction, speed, fading, and hover behaviour,  then copy the code: no JavaScript, no deprecated tags, no sign-up.",[16,2309,846,2310,320,2312,320,2314,855,2316,815],{},[71,2311,814],{"href":813},[71,2313,597],{"href":73},[71,2315,718],{"href":717},[71,2317,854],{"href":853},[861,2319],{},[11,2321,866],{"id":865},[82,2323,2324,2330,2338,2343,2353],{},[38,2325,2326,2327,2329],{},"HTML Living Standard (WHATWG): the ",[23,2328,1408],{}," element is listed as obsolete and non-conforming",[38,2331,2332,2333,26,2335,876],{},"W3C CSS Animations Level 1: specification for ",[23,2334,1591],{},[23,2336,2337],{},"animation",[38,2339,871,2340,2342],{},[23,2341,430],{}," used in edge fading",[38,2344,879,2345,320,2347,320,2349,855,2351],{},[23,2346,1878],{},[23,2348,2007],{},[23,2350,2337],{},[23,2352,1442],{},[38,2354,2355],{},"Web Content Accessibility Guidelines (WCAG) 2.1; Success Criterion 2.2.2 (Pause, Stop, Hide) and Success Criterion 2.3.3 (Animation from Interactions)",[899,2357,2358],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":274,"searchDepth":292,"depth":292,"links":2360},[2361,2363,2368,2374,2381,2389,2390,2391,2392],{"id":1404,"depth":292,"text":2362},"The marquee is back,  but the \u003Cmarquee> tag is not",{"id":1470,"depth":292,"text":1471,"children":2364},[2365,2366,2367],{"id":1481,"depth":379,"text":1482},{"id":1506,"depth":379,"text":1507},{"id":243,"depth":379,"text":244},{"id":1604,"depth":292,"text":1605,"children":2369},[2370,2371,2372,2373],{"id":1608,"depth":379,"text":1609},{"id":1725,"depth":379,"text":1726},{"id":1889,"depth":379,"text":1890},{"id":1992,"depth":379,"text":1993},{"id":458,"depth":292,"text":459,"children":2375},[2376,2377,2378,2379,2380],{"id":2013,"depth":379,"text":2014},{"id":2046,"depth":379,"text":2047},{"id":2053,"depth":379,"text":2054},{"id":2060,"depth":379,"text":2061},{"id":2067,"depth":379,"text":2068},{"id":2074,"depth":292,"text":2075,"children":2382},[2383,2385,2386,2388],{"id":2081,"depth":379,"text":2384},"Respect prefers-reduced-motion",{"id":2130,"depth":379,"text":2131},{"id":2139,"depth":379,"text":2387},"Use aria-hidden on the duplicate",{"id":2154,"depth":379,"text":2155},{"id":2161,"depth":292,"text":2162},{"id":777,"depth":292,"text":778},{"id":2301,"depth":292,"text":2302},{"id":865,"depth":292,"text":866},"2026-06-17","Learn how to create modern, performant CSS-only infinite scrolling marquees for logos, text, and cards. No JavaScript, no deprecated HTML — just clean CSS animations with a free generator.","\u002Fblog\u002Fcss-marquee-generator-guide-2026.webp",{},"CSS Marquee Generator: Infinite Scroll Animations Free (2026)","\u002Fblog\u002Fcss-marquee-generator-guide-2026",{"title":1399,"description":2394},"blog\u002Fcss-marquee-generator-guide-2026",[2402,943,2403,2404],"CSS Animation","Marquee Effect","Infinite Scroll","vB1F0DMwJOb-cz8tKGWZp_s53uSMDj6iWDUKqQxD6jk",1786688549318]