[{"data":1,"prerenderedAt":2257},["ShallowReactive",2],{"\u002Fblog\u002Fcss-shape-animator-guide-2026":3,"recommended-\u002Fblog\u002Fcss-shape-animator-guide-2026":811},{"id":4,"title":5,"author":6,"body":7,"category":793,"date":794,"description":795,"draft":796,"extension":797,"image":798,"meta":799,"metaTitle":800,"navigation":801,"path":802,"seo":803,"stem":804,"tags":805,"__hash__":810},"blog\u002Fblog\u002Fcss-shape-animator-guide-2026.md","How to Create Animated CSS Shapes: Morphing Blobs, Masks and Section Dividers","Ganesh Kanse",{"type":8,"value":9,"toc":770},"minimark",[10,15,19,42,54,57,61,73,78,81,86,89,100,103,107,110,113,117,120,124,180,184,187,209,212,216,220,223,360,363,367,377,383,401,405,409,412,415,429,433,436,444,448,451,455,458,462,465,543,558,562,600,642,646,651,657,662,670,675,681,686,689,694,699,703,708,725,728,732,766],[11,12,14],"h2",{"id":13},"what-are-animated-css-shapes","What are animated CSS shapes?",[16,17,18],"p",{},"Animated CSS shapes are elements whose visible outline changes continuously over time, creating a morphing or flowing effect. The most common examples are:",[20,21,22,30,36],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"Morphing blobs",": organic shapes that smoothly transition between different random variations, used as hero section backgrounds",[23,31,32,35],{},[26,33,34],{},"Animated wave dividers",": wavy section separators that undulate, creating a fluid feel between content blocks",[23,37,38,41],{},[26,39,40],{},"Shape-masked images",": photographs clipped into a blob or organic shape that slowly morphs, drawing subtle attention to the image",[16,43,44,45,49,50,53],{},"These animations are achieved using CSS ",[46,47,48],"code",{},"@keyframes"," that transition between multiple ",[46,51,52],{},"clip-path"," or SVG path states. The browser interpolates between each keyframe, producing smooth shape changes.",[16,55,56],{},"The visual effect is striking;  it makes a page feel alive and dynamic,  but writing the CSS by hand is exceptionally tedious. A morphing blob requires defining 5–10 distinct path variations, each with the same number of control points, and chaining them into a multi-step keyframe animation. This can easily exceed 100 lines of CSS for a single animated shape.",[11,58,60],{"id":59},"what-does-the-css-shape-animator-do","What does the CSS Shape Animator do?",[16,62,63,64,69,70,72],{},"The ",[65,66,68],"a",{"href":67},"\u002Ftools\u002Fcss-shape-animator","CampaignMorph CSS Shape Animator"," generates these animations automatically. You choose a shape, adjust the visual parameters, and the tool produces complete ",[46,71,48],{}," CSS ready to paste into your project.",[74,75,77],"h3",{"id":76},"three-modes","Three modes",[16,79,80],{},"The tool supports three primary use cases, each with its own output format:",[82,83,85],"h4",{"id":84},"_1-image-mask-mode","1. Image mask mode",[16,87,88],{},"Upload an image and apply a morphing shape as a mask. The image is clipped into a blob, wave, or organic shape that continuously morphs. This is commonly used for:",[20,90,91,94,97],{},[23,92,93],{},"Profile photos that feel more dynamic than static circles",[23,95,96],{},"Product images with a distinctive, branded frame",[23,98,99],{},"Hero images that catch attention without competing with the content",[16,101,102],{},"The tool lets you adjust the image position and zoom within the mask, so you can frame the subject exactly as needed.",[82,104,106],{"id":105},"_2-section-divider-mode","2. Section divider mode",[16,108,109],{},"Generate an animated wave that functions as a section divider between two content blocks. The wave undulates smoothly, creating a fluid transition between sections with different background colours.",[16,111,112],{},"In this mode, the tool automatically switches to wave shapes and adjusts the output dimensions to be wider than tall, matching typical full-width divider proportions.",[82,114,116],{"id":115},"_3-background-mode","3. Background mode",[16,118,119],{},"Generate a morphing blob or shape as a standalone animated background element. This produces an SVG element with embedded animation that can be placed behind content as a decorative accent.",[74,121,123],{"id":122},"customisation-controls","Customisation controls",[20,125,126,132,138,144,150,156,162,168,174],{},[23,127,128,131],{},[26,129,130],{},"Shape type",": blob or wave",[23,133,134,137],{},[26,135,136],{},"Complexity",": number of control points (more points = more intricate shapes)",[23,139,140,143],{},[26,141,142],{},"Randomness",": how far control points deviate from regularity",[23,145,146,149],{},[26,147,148],{},"Size",": dimensions of the output shape",[23,151,152,155],{},[26,153,154],{},"Seed",": randomise to get a completely different shape family",[23,157,158,161],{},[26,159,160],{},"Number of frames",": how many distinct shape states the animation transitions through (more frames = smoother morphing)",[23,163,164,167],{},[26,165,166],{},"Animation duration",": how long one complete morph cycle takes (in seconds)",[23,169,170,173],{},[26,171,172],{},"Easing",": the timing function (ease-in-out for smooth organic motion, linear for constant speed)",[23,175,176,179],{},[26,177,178],{},"Colours",": two-colour gradient applied to the shape background",[74,181,183],{"id":182},"output","Output",[16,185,186],{},"The tool generates:",[20,188,189,199,206],{},[23,190,191,192,194,195,198],{},"CSS ",[46,193,48],{}," with multi-step percentage stops, each defining a different ",[46,196,197],{},"clip-path: path()"," value",[23,200,201,202,205],{},"The corresponding element class with ",[46,203,204],{},"animation"," property applied",[23,207,208],{},"For image mask mode: the complete CSS for the masked image container",[16,210,211],{},"You copy the CSS and apply it to your HTML element.",[11,213,215],{"id":214},"how-css-shape-animation-works","How CSS shape animation works",[74,217,219],{"id":218},"the-keyframe-approach","The keyframe approach",[16,221,222],{},"A morphing shape animation defines multiple distinct shape states at different percentage stops:",[224,225,230],"pre",{"className":226,"code":227,"language":228,"meta":229,"style":229},"language-css shiki shiki-themes github-light github-dark","@keyframes morphShape {\n  0% {\n    clip-path: path(\"M 250,50 C 350,50 450,150 ...\");\n  }\n  33% {\n    clip-path: path(\"M 250,45 C 355,52 448,145 ...\");\n  }\n  66% {\n    clip-path: path(\"M 248,48 C 345,55 452,148 ...\");\n  }\n  100% {\n    clip-path: path(\"M 250,50 C 350,50 450,150 ...\");\n  }\n}\n","css","",[46,231,232,248,257,274,280,288,300,305,313,325,330,338,349,354],{"__ignoreMap":229},[233,234,237,240,244],"span",{"class":235,"line":236},"line",1,[233,238,48],{"class":239},"szBVR",[233,241,243],{"class":242},"s4XuR"," morphShape",[233,245,247],{"class":246},"sVt8B"," {\n",[233,249,251,255],{"class":235,"line":250},2,[233,252,254],{"class":253},"sScJk","  0%",[233,256,247],{"class":246},[233,258,260,264,267,271],{"class":235,"line":259},3,[233,261,263],{"class":262},"sj4cs","    clip-path",[233,265,266],{"class":246},": path(",[233,268,270],{"class":269},"sZZnC","\"M 250,50 C 350,50 450,150 ...\"",[233,272,273],{"class":246},");\n",[233,275,277],{"class":235,"line":276},4,[233,278,279],{"class":246},"  }\n",[233,281,283,286],{"class":235,"line":282},5,[233,284,285],{"class":253},"  33%",[233,287,247],{"class":246},[233,289,291,293,295,298],{"class":235,"line":290},6,[233,292,263],{"class":262},[233,294,266],{"class":246},[233,296,297],{"class":269},"\"M 250,45 C 355,52 448,145 ...\"",[233,299,273],{"class":246},[233,301,303],{"class":235,"line":302},7,[233,304,279],{"class":246},[233,306,308,311],{"class":235,"line":307},8,[233,309,310],{"class":253},"  66%",[233,312,247],{"class":246},[233,314,316,318,320,323],{"class":235,"line":315},9,[233,317,263],{"class":262},[233,319,266],{"class":246},[233,321,322],{"class":269},"\"M 248,48 C 345,55 452,148 ...\"",[233,324,273],{"class":246},[233,326,328],{"class":235,"line":327},10,[233,329,279],{"class":246},[233,331,333,336],{"class":235,"line":332},11,[233,334,335],{"class":253},"  100%",[233,337,247],{"class":246},[233,339,341,343,345,347],{"class":235,"line":340},12,[233,342,263],{"class":262},[233,344,266],{"class":246},[233,346,270],{"class":269},[233,348,273],{"class":246},[233,350,352],{"class":235,"line":351},13,[233,353,279],{"class":246},[233,355,357],{"class":235,"line":356},14,[233,358,359],{"class":246},"}\n",[16,361,362],{},"The browser interpolates between each path state, producing a smooth transition. For this to work correctly, every path in every keyframe must have the same number and type of path commands. This is the primary technical constraint that makes hand-writing these animations difficult and the primary reason a generator is valuable.",[74,364,366],{"id":365},"performance-considerations","Performance considerations",[16,368,369,370,372,373,376],{},"Shape animations are GPU-composited when using ",[46,371,52],{}," on elements with ",[46,374,375],{},"will-change: clip-path"," or when using SVG SMIL animations. This means they run at 60fps on modern hardware without blocking the main thread.",[16,378,379,380,382],{},"However, animating ",[46,381,52],{}," on very large elements (e.g., full-viewport backgrounds at 4K resolution) can consume GPU resources. For these cases:",[20,384,385,388,394],{},[23,386,387],{},"Keep the animation simple (3–5 keyframes rather than 10)",[23,389,390,391,393],{},"Use ",[46,392,375],{}," to hint the browser",[23,395,396,397,400],{},"Prefer ",[46,398,399],{},"transform"," animations (scale, rotate) in combination with a static clip-path where possible",[11,402,404],{"id":403},"common-use-cases","Common use cases",[74,406,408],{"id":407},"hero-section-morphing-backgrounds","Hero section morphing backgrounds",[16,410,411],{},"The most popular use case: a large blob shape behind the hero heading and CTA that slowly morphs. This creates a sense of motion and modernity without distracting from the content.",[16,413,414],{},"Best practices:",[20,416,417,420,423],{},[23,418,419],{},"Use a low-opacity gradient fill so the text remains readable",[23,421,422],{},"Set the animation duration to 6–10 seconds for subtle, calming motion",[23,424,390,425,428],{},[46,426,427],{},"ease-in-out"," easing for organic movement",[74,430,432],{"id":431},"animated-image-frames","Animated image frames",[16,434,435],{},"Clip a product photo, team headshot, or testimonial image into a morphing blob mask. The continuous subtle shape change draws the eye to the image more effectively than a static circle or square frame.",[16,437,438,439,443],{},"Combine this with the ",[65,440,442],{"href":441},"\u002Ftools\u002Fimage-resizer","Image Resizer"," to prepare your images at the correct dimensions before masking.",[74,445,447],{"id":446},"flowing-section-dividers","Flowing section dividers",[16,449,450],{},"Replace static wavy SVG dividers with animated wave dividers. The wave undulates at the boundary between two sections, creating a fluid, modern feel. This works especially well between a coloured section and a white section.",[74,452,454],{"id":453},"loading-and-transition-states","Loading and transition states",[16,456,457],{},"Use morphing blob shapes as loading indicators or page transition effects. A smoothly morphing shape feels more polished and branded than a generic spinner.",[11,459,461],{"id":460},"css-shape-animator-vs-svg-shape-generator","CSS Shape Animator vs SVG Shape Generator",[16,463,464],{},"Both tools create shapes and animations, but they serve different purposes:",[466,467,468,484],"table",{},[469,470,471],"thead",{},[472,473,474,478,481],"tr",{},[475,476,477],"th",{},"Feature",[475,479,480],{},"CSS Shape Animator",[475,482,483],{},"SVG Shape Generator",[485,486,487,499,510,521,532],"tbody",{},[472,488,489,493,496],{},[490,491,492],"td",{},"Primary output",[490,494,495],{},"CSS keyframe animations",[490,497,498],{},"Static SVG code",[472,500,501,504,507],{},[490,502,503],{},"Animation",[490,505,506],{},"Multi-frame morphing",[490,508,509],{},"Single-frame SMIL (optional)",[472,511,512,515,518],{},[490,513,514],{},"Use case",[490,516,517],{},"Dynamic, moving shapes",[490,519,520],{},"Static decorative shapes",[472,522,523,526,529],{},[490,524,525],{},"Image masking",[490,527,528],{},"Built-in support",[490,530,531],{},"Manual CSS integration needed",[472,533,534,537,540],{},[490,535,536],{},"Section dividers",[490,538,539],{},"Dedicated mode",[490,541,542],{},"Manual positioning needed",[16,544,545,546,549,550,552,553,557],{},"For static shapes, use the ",[65,547,483],{"href":548},"\u002Ftools\u002Fsvg-shape-generator",". For animated shapes, use the ",[65,551,480],{"href":67},". For static CSS-only shapes without SVG, use the ",[65,554,556],{"href":555},"\u002Ftools\u002Fcss-shape-generator","CSS Shape Generator",".",[11,559,561],{"id":560},"tips-for-effective-shape-animations","Tips for effective shape animations",[20,563,564,570,576,582,588],{},[23,565,566,569],{},[26,567,568],{},"Slow is better than fast."," Animation durations of 4–10 seconds feel organic and calming. Durations under 2 seconds feel jittery and distracting.",[23,571,572,575],{},[26,573,574],{},"Loop seamlessly."," The first and last keyframes should be identical so the animation loops without a visible jump. The generator handles this automatically.",[23,577,578,581],{},[26,579,580],{},"Use sparingly."," One or two animated shapes per page is usually sufficient. Multiple competing animations reduce the impact of each one.",[23,583,584,587],{},[26,585,586],{},"Test on mobile."," Some older mobile devices may struggle with complex path animations on large elements. Test on real devices and consider reducing complexity for mobile viewports.",[23,589,590,593,594,597,599],{},[26,591,592],{},"Respect"," ",[46,595,596],{},"prefers-reduced-motion",[26,598,557],{}," Some users enable reduced motion settings for accessibility reasons. Wrap your animation in a media query:",[224,601,603],{"className":226,"code":602,"language":228,"meta":229,"style":229},"@media (prefers-reduced-motion: reduce) {\n  .morphing-blob {\n    animation: none;\n  }\n}\n",[46,604,605,613,620,634,638],{"__ignoreMap":229},[233,606,607,610],{"class":235,"line":236},[233,608,609],{"class":239},"@media",[233,611,612],{"class":246}," (prefers-reduced-motion: reduce) {\n",[233,614,615,618],{"class":235,"line":250},[233,616,617],{"class":253},"  .morphing-blob",[233,619,247],{"class":246},[233,621,622,625,628,631],{"class":235,"line":259},[233,623,624],{"class":262},"    animation",[233,626,627],{"class":246},": ",[233,629,630],{"class":262},"none",[233,632,633],{"class":246},";\n",[233,635,636],{"class":235,"line":276},[233,637,279],{"class":246},[233,639,640],{"class":235,"line":282},[233,641,359],{"class":246},[11,643,645],{"id":644},"frequently-asked-questions","Frequently asked questions",[16,647,648],{},[26,649,650],{},"1. What is a CSS shape animator?",[16,652,653,654,656],{},"A CSS shape animator is a tool that generates ",[46,655,48],{}," CSS code for morphing shape animations. It produces multiple shape states that the browser smoothly transitions between, creating a continuous morphing effect.",[16,658,659],{},[26,660,661],{},"2. Do animated shapes affect page performance?",[16,663,664,665,667,668,557],{},"Minimally. CSS ",[46,666,52],{}," animations are GPU-composited in modern browsers and typically run at 60fps. For very large elements, keep the animation complexity low and use ",[46,669,375],{},[16,671,672],{},[26,673,674],{},"3. Can I use animated shapes as image masks?",[16,676,677,678,680],{},"Yes. The ",[65,679,480],{"href":67}," has a dedicated image mask mode where you upload a photo and apply a morphing shape as a clip-path mask.",[16,682,683],{},[26,684,685],{},"4. Is the CSS Shape Animator free?",[16,687,688],{},"Yes. The tool runs in your browser, requires no sign-up, and produces production-ready CSS with no watermarks or usage limits.",[16,690,691],{},[26,692,693],{},"5. Will these animations work in all browsers?",[16,695,696,698],{},[46,697,197],{}," animation is supported in Chrome, Firefox, Edge, and Safari. For older browsers, the shape will appear static (the element displays without clipping), which is a graceful degradation.",[11,700,702],{"id":701},"try-the-free-css-shape-animator","Try the free CSS Shape Animator",[16,704,63,705,707],{},[65,706,68],{"href":67}," generates animated morphing shapes, image masks, and section dividers with complete CSS keyframe code. Choose your shape, adjust the animation, and copy the output. No coding required.",[16,709,710,711,713,714,713,716,720,721,557],{},"For related tools, explore the ",[65,712,556],{"href":555},", ",[65,715,483],{"href":548},[65,717,719],{"href":718},"\u002Ftools\u002Fcss-gradient-generator","CSS Gradient Generator",", and ",[65,722,724],{"href":723},"\u002Ftools\u002Fcss-marquee-generator","CSS Marquee Generator",[726,727],"hr",{},[11,729,731],{"id":730},"sources","Sources",[20,733,734,743,751,763],{},[23,735,736,737,739,740,742],{},"W3C CSS Animations Level 1: specification for ",[46,738,48],{}," and ",[46,741,204],{}," properties",[23,744,745,746,739,748,742],{},"W3C CSS Masking Module Level 1: specification for ",[46,747,52],{},[46,749,750],{},"mask",[23,752,753,754,713,756,713,759,720,761],{},"MDN Web Docs: documentation for ",[46,755,52],{},[46,757,758],{},"path()",[46,760,48],{},[46,762,596],{},[23,764,765],{},"Web Content Accessibility Guidelines (WCAG) 2.1 guidance on animation and motion for accessibility (Success Criterion 2.3.3)",[767,768,769],"style",{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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":229,"searchDepth":250,"depth":250,"links":771},[772,773,778,782,788,789,790,791,792],{"id":13,"depth":250,"text":14},{"id":59,"depth":250,"text":60,"children":774},[775,776,777],{"id":76,"depth":259,"text":77},{"id":122,"depth":259,"text":123},{"id":182,"depth":259,"text":183},{"id":214,"depth":250,"text":215,"children":779},[780,781],{"id":218,"depth":259,"text":219},{"id":365,"depth":259,"text":366},{"id":403,"depth":250,"text":404,"children":783},[784,785,786,787],{"id":407,"depth":259,"text":408},{"id":431,"depth":259,"text":432},{"id":446,"depth":259,"text":447},{"id":453,"depth":259,"text":454},{"id":460,"depth":250,"text":461},{"id":560,"depth":250,"text":561},{"id":644,"depth":250,"text":645},{"id":701,"depth":250,"text":702},{"id":730,"depth":250,"text":731},"Tools","2026-06-15","Learn how to create animated morphing CSS shapes for hero sections, image masks, and section dividers. Generate CSS keyframe animations with production-ready code — free, in your browser.",false,"md","\u002Fblog\u002Fcss-shape-animator-guide-2026.webp",{},"CSS Shape Animator: Morphing Blobs & Animated Masks Free (2026)",true,"\u002Fblog\u002Fcss-shape-animator-guide-2026",{"title":5,"description":795},"blog\u002Fcss-shape-animator-guide-2026",[806,807,808,809],"CSS Animation","Web Design","Morphing Shapes","Keyframe Animation","dis0u3w46gexbAu-cC_xW--0KHTfgnfSROFQ9Ii89A8",[812,1064,1261],{"id":813,"title":814,"author":6,"body":815,"category":793,"date":1051,"description":1052,"draft":796,"extension":797,"image":1053,"meta":1054,"metaTitle":1055,"navigation":801,"path":1056,"seo":1057,"stem":1058,"tags":1059,"__hash__":1063},"blog\u002Fblog\u002F30-second-favicon-optimisation-checklist-better-brand-recognition.md","The 30-Second Favicon Optimization Checklist",{"type":8,"value":816,"toc":1043},[817,821,824,827,831,834,860,863,867,874,954,958,961,965,979,983,997,1001,1020,1024,1027,1031,1038],[74,818,820],{"id":819},"the-smallest-pixel-real-estate-with-the-biggest-impact","The Smallest Pixel Real Estate with the Biggest Impact",[16,822,823],{},"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,825,826],{},"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.",[74,828,830],{"id":829},"why-favicons-matter-for-branding-and-usability","Why Favicons Matter for Branding and Usability",[16,832,833],{},"Favicons serve as the visual anchor for your brand across the web's entire user interface layer. They appear in:",[20,835,836,842,848,854],{},[23,837,838,841],{},[26,839,840],{},"Browser Tabs:"," Helping users navigate when they have dozens of tabs open.",[23,843,844,847],{},[26,845,846],{},"Bookmarks and History:"," Making your site instantly recognisable in saved lists.",[23,849,850,853],{},[26,851,852],{},"Mobile Home Screens:"," Function as app icons when users save your site to their devices.",[23,855,856,859],{},[26,857,858],{},"Google SERPs:"," Acting as a miniature billboard beside your organic search listing.",[16,861,862],{},"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.",[74,864,866],{"id":865},"the-essential-favicon-sizes-for-modern-devices","The Essential Favicon Sizes for Modern Devices",[16,868,869,870,873],{},"Creating a single 16x16 ",[46,871,872],{},".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.",[466,875,876,889],{},[469,877,878],{},[472,879,880,883,886],{},[475,881,882],{},"Size (Pixels)",[475,884,885],{},"Primary Use Case",[475,887,888],{},"Format",[485,890,891,904,916,929,941],{},[472,892,893,898,901],{},[490,894,895],{},[26,896,897],{},"16x16",[490,899,900],{},"Standard desktop browser tabs",[490,902,903],{},"ICO or PNG",[472,905,906,911,914],{},[490,907,908],{},[26,909,910],{},"32x32",[490,912,913],{},"Taskbar shortcut icons, Retina browser tabs",[490,915,903],{},[472,917,918,923,926],{},[490,919,920],{},[26,921,922],{},"180x180",[490,924,925],{},"Apple Touch Icon (iOS home screen saves)",[490,927,928],{},"PNG",[472,930,931,936,939],{},[490,932,933],{},[26,934,935],{},"192x192",[490,937,938],{},"Android \u002F Chrome Web App Manifest",[490,940,928],{},[472,942,943,948,951],{},[490,944,945],{},[26,946,947],{},"512x512",[490,949,950],{},"PWA splash screens, WordPress site icons",[490,952,953],{},"PNG or SVG",[74,955,957],{"id":956},"the-30-second-favicon-optimisation-checklist","The 30-Second Favicon Optimisation Checklist",[16,959,960],{},"Run your current website through this quick diagnostic checklist to ensure your favicon SEO adheres to 2026 best practices.",[82,962,964],{"id":963},"_1-design-for-high-contrast-and-simplicity","1. Design for High Contrast and Simplicity",[20,966,967,973],{},[23,968,969,972],{},[26,970,971],{},"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.",[23,974,975,978],{},[26,976,977],{},"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.",[82,980,982],{"id":981},"_2-export-in-the-correct-formats-and-sizes","2. Export in the Correct Formats and Sizes",[20,984,985,991],{},[23,986,987,990],{},[26,988,989],{},"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.",[23,992,993,996],{},[26,994,995],{},"Generate the required suite:"," 16x16, 32x32, 180x180, and 192x192.",[82,998,1000],{"id":999},"_3-implement-the-code-correctly","3. Implement the Code Correctly",[20,1002,1003,1017],{},[23,1004,1005,1006,1009,1010,739,1013,1016],{},"Ensure your HTML ",[46,1007,1008],{},"\u003Chead>"," contains the proper ",[46,1011,1012],{},"rel=\"icon\"",[46,1014,1015],{},"rel=\"apple-touch-icon\""," Tags pointing to absolute URLs.",[23,1018,1019],{},"Verify that the image files are accessible to search engine crawlers (do not block them in your robots.txt).",[74,1021,1023],{"id":1022},"common-favicon-mistakes-to-avoid","Common Favicon Mistakes to Avoid",[16,1025,1026],{},"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.",[74,1028,1030],{"id":1029},"streamline-the-process","Streamline the Process",[16,1032,1033,1034,1037],{},"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 ",[26,1035,1036],{},"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,1039,1040],{},[26,1041,1042],{},"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":229,"searchDepth":250,"depth":250,"links":1044},[1045,1046,1047,1048,1049,1050],{"id":819,"depth":259,"text":820},{"id":829,"depth":259,"text":830},{"id":865,"depth":259,"text":866},{"id":956,"depth":259,"text":957},{"id":1022,"depth":259,"text":1023},{"id":1029,"depth":259,"text":1030},"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":814,"description":1052},"blog\u002F30-second-favicon-optimisation-checklist-better-brand-recognition",[1060,1061,1062],"Favicon","SEO","Branding","XAOnZNOxXZzAd8PbE87gPdTawKodiucVu4ObF4ovxWI",{"id":1065,"title":1066,"author":6,"body":1067,"category":793,"date":1249,"description":1250,"draft":796,"extension":797,"image":1251,"meta":1252,"metaTitle":1066,"navigation":801,"path":1253,"seo":1254,"stem":1255,"tags":1256,"__hash__":1260},"blog\u002Fblog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows.md","CMYK to RGB Conversion Guide for Marketers",{"type":8,"value":1068,"toc":1242},[1069,1073,1076,1079,1083,1086,1090,1098,1102,1109,1113,1116,1136,1140,1143,1147,1154,1158,1165,1169,1172,1176,1237],[74,1070,1072],{"id":1071},"the-colour-shift-dilemma","The Colour Shift Dilemma",[16,1074,1075],{},"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,1077,1078],{},"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.",[74,1080,1082],{"id":1081},"understanding-the-core-difference-cmyk-vs-rgb","Understanding the Core Difference: CMYK vs RGB",[16,1084,1085],{},"To understand why colour format conversion is so challenging, we must look at how colour is physically produced in both media.",[82,1087,1089],{"id":1088},"cmyk-subtractive-colour","CMYK (Subtractive Colour)",[16,1091,1092,1093,1097],{},"CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is the standard colour model used in offset and digital printing. It is a ",[1094,1095,1096],"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.",[82,1099,1101],{"id":1100},"rgb-additive-colour","RGB (Additive Colour)",[16,1103,1104,1105,1108],{},"RGB stands for Red, Green, and Blue. This model is used in digital screens, smartphones, and televisions. It is an ",[1094,1106,1107],{},"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.",[74,1110,1112],{"id":1111},"why-print-to-digital-conversion-often-fails","Why Print-to-Digital Conversion Often Fails",[16,1114,1115],{},"Directly exporting a CMYK file for digital use frequently results in highly inaccurate, unappealing colours. This happens for several technical reasons:",[20,1117,1118,1124,1130],{},[23,1119,1120,1123],{},[26,1121,1122],{},"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.",[23,1125,1126,1129],{},[26,1127,1128],{},"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.",[23,1131,1132,1135],{},[26,1133,1134],{},"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.",[74,1137,1139],{"id":1138},"the-conversion-workflow-and-quality-control","The Conversion Workflow and Quality Control",[16,1141,1142],{},"A professional print-to-digital workflow requires more than just changing a dropdown menu in a design tool. It requires careful mapping.",[82,1144,1146],{"id":1145},"_1-use-the-right-tools","1. Use the Right Tools",[16,1148,1149,1150,1153],{},"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 ",[26,1151,1152],{},"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.",[82,1155,1157],{"id":1156},"_2-standardise-to-srgb","2. Standardise to sRGB",[16,1159,1160,1161,1164],{},"When converting for web use, always target the ",[26,1162,1163],{},"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.",[82,1166,1168],{"id":1167},"_3-test-across-environments","3. Test Across Environments",[16,1170,1171],{},"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.",[74,1173,1175],{"id":1174},"common-conversion-problems-and-fixes","Common Conversion Problems and Fixes",[466,1177,1178,1191],{},[469,1179,1180],{},[472,1181,1182,1185,1188],{},[475,1183,1184],{},"The Problem",[475,1186,1187],{},"The Cause",[475,1189,1190],{},"The Fix",[485,1192,1193,1204,1215,1226],{},[472,1194,1195,1198,1201],{},[490,1196,1197],{},"Blacks look like washed-out dark grey.",[490,1199,1200],{},"CMYK standard black (100K) converting to RGB grey.",[490,1202,1203],{},"Manually force black elements to HEX #000000 or RGB (0,0,0).",[472,1205,1206,1209,1212],{},[490,1207,1208],{},"Blues appear slightly purple on screen.",[490,1210,1211],{},"Cyan\u002FMagenta mix mismatch in sRGB translation.",[490,1213,1214],{},"Reduce the red channel slightly in the RGB mix to cool down the blue.",[472,1216,1217,1220,1223],{},[490,1218,1219],{},"The overall image looks dull and lifeless.",[490,1221,1222],{},"CMYK's smaller gamut restricts the RGB output.",[490,1224,1225],{},"Apply a slight global saturation and vibrance boost post-conversion.",[472,1227,1228,1231,1234],{},[490,1229,1230],{},"Colours look totally different in Chrome vs Safari.",[490,1232,1233],{},"Image saved without an embedded sRGB profile.",[490,1235,1236],{},"Always check \"Embed Colour Profile (sRGB)\" upon final web export.",[16,1238,1239],{},[26,1240,1241],{},"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":229,"searchDepth":250,"depth":250,"links":1243},[1244,1245,1246,1247,1248],{"id":1071,"depth":259,"text":1072},{"id":1081,"depth":259,"text":1082},{"id":1111,"depth":259,"text":1112},{"id":1138,"depth":259,"text":1139},{"id":1174,"depth":259,"text":1175},"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":1066,"description":1250},"blog\u002Fcmyk-rgb-conversion-complete-guide-print-digital-workflows",[1257,1258,1259],"Color Conversion","Print Design","Digital Design","DeHsWw6gf9Sz6Qvqs9ymfFUVmwbxuC1zWucDj6UvBnQ",{"id":1262,"title":1263,"author":6,"body":1264,"category":793,"date":2245,"description":2246,"draft":796,"extension":797,"image":2247,"meta":2248,"metaTitle":2249,"navigation":801,"path":2250,"seo":2251,"stem":2252,"tags":2253,"__hash__":2256},"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":1265,"toc":2211},[1266,1274,1280,1283,1286,1329,1332,1336,1342,1346,1350,1353,1357,1360,1364,1367,1371,1441,1443,1446,1464,1467,1471,1475,1478,1581,1584,1588,1725,1731,1745,1749,1756,1849,1852,1856,1871,1873,1877,1880,1882,1903,1907,1910,1914,1917,1921,1924,1928,1931,1935,1938,1944,1947,1985,1989,1994,2001,2008,2012,2015,2019,2055,2057,2067,2072,2077,2086,2091,2094,2099,2102,2107,2110,2120,2150,2153,2157,2162,2172,2174,2176,2208],[11,1267,1269,1270,1273],{"id":1268},"the-marquee-is-back-but-the-marquee-tag-is-not","The marquee is back,  but the ",[46,1271,1272],{},"\u003Cmarquee>"," tag is not",[16,1275,1276,1277,1279],{},"If you have been building websites long enough, you remember the HTML ",[46,1278,1272],{}," 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,1281,1282],{},"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,1284,1285],{},"The modern CSS marquee is:",[20,1287,1288,1298,1307,1323],{},[23,1289,1290,1293,1294,1297],{},[26,1291,1292],{},"Performant."," It uses CSS ",[46,1295,1296],{},"transform: translateX()"," animations, which are GPU-composited and run at 60fps without blocking the main thread.",[23,1299,1300,1303,1304,1306],{},[26,1301,1302],{},"Accessible."," It respects ",[46,1305,596],{}," settings when implemented correctly.",[23,1308,1309,1312,1313,713,1316,713,1319,1322],{},[26,1310,1311],{},"Semantic."," It uses standard HTML elements (",[46,1314,1315],{},"\u003Cdiv>",[46,1317,1318],{},"\u003Cspan>",[46,1320,1321],{},"\u003Cimg>",") instead of a deprecated proprietary tag.",[23,1324,1325,1328],{},[26,1326,1327],{},"Flexible."," It works with text, images, cards, or any HTML content.",[16,1330,1331],{},"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,1333,1335],{"id":1334},"what-does-the-css-marquee-generator-do","What does the CSS Marquee Generator do?",[16,1337,63,1338,1341],{},[65,1339,1340],{"href":723},"CampaignMorph CSS Marquee Generator"," generates production-ready HTML and CSS for infinite-scrolling marquees. You configure the behaviour visually and copy the code.",[74,1343,1345],{"id":1344},"three-content-modes","Three content modes",[82,1347,1349],{"id":1348},"text-mode","Text mode",[16,1351,1352],{},"Enter custom text that scrolls continuously. Useful for announcements, ticker-style messages, or decorative text bands.",[82,1354,1356],{"id":1355},"logo-mode","Logo mode",[16,1358,1359],{},"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.",[82,1361,1363],{"id":1362},"card-mode","Card mode",[16,1365,1366],{},"Preview with card-style elements. Replace with your actual card components for scrolling testimonials, product features, or team members.",[74,1368,1370],{"id":1369},"configuration-options","Configuration options",[466,1372,1373,1383],{},[469,1374,1375],{},[472,1376,1377,1380],{},[475,1378,1379],{},"Option",[475,1381,1382],{},"What it controls",[485,1384,1385,1393,1401,1409,1417,1425,1433],{},[472,1386,1387,1390],{},[490,1388,1389],{},"Direction",[490,1391,1392],{},"Left, right, up, or down scrolling",[472,1394,1395,1398],{},[490,1396,1397],{},"Speed",[490,1399,1400],{},"Duration of one complete scroll cycle (in seconds)",[472,1402,1403,1406],{},[490,1404,1405],{},"Gap",[490,1407,1408],{},"Spacing between items (in pixels)",[472,1410,1411,1414],{},[490,1412,1413],{},"Angle",[490,1415,1416],{},"Rotation of the entire marquee (for diagonal scrolling effects)",[472,1418,1419,1422],{},[490,1420,1421],{},"Pause on hover",[490,1423,1424],{},"Whether the animation pauses when the user hovers over the marquee",[472,1426,1427,1430],{},[490,1428,1429],{},"Fade edges",[490,1431,1432],{},"Whether gradient masks are applied at the start and end to create a smooth fade-in\u002Ffade-out",[472,1434,1435,1438],{},[490,1436,1437],{},"Fade size",[490,1439,1440],{},"Width of the fade zones (in pixels)",[74,1442,183],{"id":182},[16,1444,1445],{},"The generator produces two code blocks:",[1447,1448,1449,1458],"ol",{},[23,1450,1451,1454,1455,1457],{},[26,1452,1453],{},"CSS",": the complete stylesheet including CSS custom properties, the ",[46,1456,48],{}," animation, and optional mask gradients",[23,1459,1460,1463],{},[26,1461,1462],{},"HTML",": the markup structure with the duplicated content needed for seamless looping",[16,1465,1466],{},"Both code blocks are copy-ready. Paste them into your project and replace the placeholder content with your actual text, images, or components.",[11,1468,1470],{"id":1469},"how-does-the-css-marquee-technique-work","How does the CSS marquee technique work?",[74,1472,1474],{"id":1473},"the-duplication-trick","The duplication trick",[16,1476,1477],{},"The core of the infinite scroll effect is content duplication. The visible content is placed inside a container twice:",[224,1479,1483],{"className":1480,"code":1481,"language":1482,"meta":229,"style":229},"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",[46,1484,1485,1506,1522,1528,1537,1559,1564,1572],{"__ignoreMap":229},[233,1486,1487,1490,1494,1497,1500,1503],{"class":235,"line":236},[233,1488,1489],{"class":246},"\u003C",[233,1491,1493],{"class":1492},"s9eBZ","div",[233,1495,1496],{"class":253}," class",[233,1498,1499],{"class":246},"=",[233,1501,1502],{"class":269},"\"marquee-container\"",[233,1504,1505],{"class":246},">\n",[233,1507,1508,1511,1513,1515,1517,1520],{"class":235,"line":250},[233,1509,1510],{"class":246},"  \u003C",[233,1512,1493],{"class":1492},[233,1514,1496],{"class":253},[233,1516,1499],{"class":246},[233,1518,1519],{"class":269},"\"marquee-content\"",[233,1521,1505],{"class":246},[233,1523,1524],{"class":235,"line":259},[233,1525,1527],{"class":1526},"sJ8bj","    \u003C!-- Your items here -->\n",[233,1529,1530,1533,1535],{"class":235,"line":276},[233,1531,1532],{"class":246},"  \u003C\u002F",[233,1534,1493],{"class":1492},[233,1536,1505],{"class":246},[233,1538,1539,1541,1543,1545,1547,1549,1552,1554,1557],{"class":235,"line":282},[233,1540,1510],{"class":246},[233,1542,1493],{"class":1492},[233,1544,1496],{"class":253},[233,1546,1499],{"class":246},[233,1548,1519],{"class":269},[233,1550,1551],{"class":253}," aria-hidden",[233,1553,1499],{"class":246},[233,1555,1556],{"class":269},"\"true\"",[233,1558,1505],{"class":246},[233,1560,1561],{"class":235,"line":290},[233,1562,1563],{"class":1526},"    \u003C!-- Same items duplicated -->\n",[233,1565,1566,1568,1570],{"class":235,"line":302},[233,1567,1532],{"class":246},[233,1569,1493],{"class":1492},[233,1571,1505],{"class":246},[233,1573,1574,1577,1579],{"class":235,"line":307},[233,1575,1576],{"class":246},"\u003C\u002F",[233,1578,1493],{"class":1492},[233,1580,1505],{"class":246},[16,1582,1583],{},"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.",[74,1585,1587],{"id":1586},"the-animation","The animation",[224,1589,1591],{"className":226,"code":1590,"language":228,"meta":229,"style":229},"@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",[46,1592,1593,1602,1609,1627,1631,1638,1673,1677,1681,1686,1693,1721],{"__ignoreMap":229},[233,1594,1595,1597,1600],{"class":235,"line":236},[233,1596,48],{"class":239},[233,1598,1599],{"class":242}," scroll",[233,1601,247],{"class":246},[233,1603,1604,1607],{"class":235,"line":250},[233,1605,1606],{"class":253},"  from",[233,1608,247],{"class":246},[233,1610,1611,1614,1616,1619,1622,1625],{"class":235,"line":259},[233,1612,1613],{"class":262},"    transform",[233,1615,627],{"class":246},[233,1617,1618],{"class":262},"translateX",[233,1620,1621],{"class":246},"(",[233,1623,1624],{"class":262},"0",[233,1626,273],{"class":246},[233,1628,1629],{"class":235,"line":276},[233,1630,279],{"class":246},[233,1632,1633,1636],{"class":235,"line":282},[233,1634,1635],{"class":253},"  to",[233,1637,247],{"class":246},[233,1639,1640,1642,1644,1646,1648,1651,1653,1656,1659,1662,1665,1667,1670],{"class":235,"line":290},[233,1641,1613],{"class":262},[233,1643,627],{"class":246},[233,1645,1618],{"class":262},[233,1647,1621],{"class":246},[233,1649,1650],{"class":262},"calc",[233,1652,1621],{"class":246},[233,1654,1655],{"class":262},"-100",[233,1657,1658],{"class":239},"%",[233,1660,1661],{"class":239}," -",[233,1663,1664],{"class":262}," var",[233,1666,1621],{"class":246},[233,1668,1669],{"class":242},"--marquee-gap",[233,1671,1672],{"class":246},")));\n",[233,1674,1675],{"class":235,"line":302},[233,1676,279],{"class":246},[233,1678,1679],{"class":235,"line":307},[233,1680,359],{"class":246},[233,1682,1683],{"class":235,"line":315},[233,1684,1685],{"emptyLinePlaceholder":801},"\n",[233,1687,1688,1691],{"class":235,"line":327},[233,1689,1690],{"class":253},".marquee-content",[233,1692,247],{"class":246},[233,1694,1695,1698,1700,1703,1705,1707,1710,1713,1716,1719],{"class":235,"line":332},[233,1696,1697],{"class":262},"  animation",[233,1699,627],{"class":246},[233,1701,1702],{"class":262},"scroll",[233,1704,1664],{"class":262},[233,1706,1621],{"class":246},[233,1708,1709],{"class":242},"--marquee-duration",[233,1711,1712],{"class":246},") ",[233,1714,1715],{"class":262},"linear",[233,1717,1718],{"class":262}," infinite",[233,1720,633],{"class":246},[233,1722,1723],{"class":235,"line":340},[233,1724,359],{"class":246},[16,1726,63,1727,1730],{},[46,1728,1729],{},"translateX(calc(-100% - var(--marquee-gap)))"," accounts for both the content width and the gap between items, ensuring the loop is perfectly seamless.",[16,1732,1733,1734,1736,1737,1740,1741,1744],{},"Using ",[46,1735,399],{}," rather than ",[46,1738,1739],{},"left"," or ",[46,1742,1743],{},"margin-left"," is critical for performance. The GPU compositor handles CSS transforms and does not trigger layout recalculations.",[74,1746,1748],{"id":1747},"edge-fading-with-css-masks","Edge fading with CSS masks",[16,1750,1751,1752,1755],{},"The fade effect at the edges is achieved with CSS ",[46,1753,1754],{},"mask-image",":",[224,1757,1759],{"className":226,"code":1758,"language":228,"meta":229,"style":229},".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",[46,1760,1761,1768,1781,1792,1799,1812,1835,1840,1845],{"__ignoreMap":229},[233,1762,1763,1766],{"class":235,"line":236},[233,1764,1765],{"class":253},".marquee-container",[233,1767,247],{"class":246},[233,1769,1770,1773,1775,1778],{"class":235,"line":250},[233,1771,1772],{"class":262},"  mask-image",[233,1774,627],{"class":246},[233,1776,1777],{"class":262},"linear-gradient",[233,1779,1780],{"class":246},"(\n",[233,1782,1783,1786,1789],{"class":235,"line":259},[233,1784,1785],{"class":239},"    to",[233,1787,1788],{"class":262}," right",[233,1790,1791],{"class":246},",\n",[233,1793,1794,1797],{"class":235,"line":276},[233,1795,1796],{"class":262},"    transparent",[233,1798,1791],{"class":246},[233,1800,1801,1804,1807,1810],{"class":235,"line":282},[233,1802,1803],{"class":262},"    black",[233,1805,1806],{"class":262}," 100",[233,1808,1809],{"class":239},"px",[233,1811,1791],{"class":246},[233,1813,1814,1816,1819,1821,1824,1826,1828,1830,1832],{"class":235,"line":290},[233,1815,1803],{"class":262},[233,1817,1818],{"class":262}," calc",[233,1820,1621],{"class":246},[233,1822,1823],{"class":262},"100",[233,1825,1658],{"class":239},[233,1827,1661],{"class":239},[233,1829,1806],{"class":262},[233,1831,1809],{"class":239},[233,1833,1834],{"class":246},"),\n",[233,1836,1837],{"class":235,"line":302},[233,1838,1839],{"class":262},"    transparent\n",[233,1841,1842],{"class":235,"line":307},[233,1843,1844],{"class":246},"  );\n",[233,1846,1847],{"class":235,"line":315},[233,1848,359],{"class":246},[16,1850,1851],{},"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.",[74,1853,1855],{"id":1854},"vertical-scrolling","Vertical scrolling",[16,1857,1858,1859,1862,1863,1866,1867,1870],{},"For vertical marquees (scrolling up or down), the same technique applies, but the container uses",[46,1860,1861],{},"flex-direction: column",", and the animation uses ",[46,1864,1865],{},"translateY()"," instead of ",[46,1868,1869],{},"translateX()",". The container needs a fixed height so the content can scroll within it.",[11,1872,404],{"id":403},[74,1874,1876],{"id":1875},"client-and-partner-logo-bars","Client and partner logo bars",[16,1878,1879],{},"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,1881,414],{},[20,1883,1884,1887,1893,1896],{},[23,1885,1886],{},"Use PNG or SVG logos with transparent backgrounds",[23,1888,1889,1890,1892],{},"Convert logos to a consistent height (40–60px) before adding them. Use the ",[65,1891,442],{"href":441}," to batch-resize",[23,1894,1895],{},"Keep the animation speed moderate (15–25 seconds per cycle) — too fast feels frantic",[23,1897,1898,1899,1902],{},"Add ",[46,1900,1901],{},"pause on hover"," so users can read the logos",[74,1904,1906],{"id":1905},"news-ticker-and-announcements","News ticker and announcements",[16,1908,1909],{},"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\").",[74,1911,1913],{"id":1912},"testimonial-scrollers","Testimonial scrollers",[16,1915,1916],{},"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.",[74,1918,1920],{"id":1919},"technology-stack-display","Technology stack display",[16,1922,1923],{},"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.",[74,1925,1927],{"id":1926},"event-sponsor-displays","Event sponsor displays",[16,1929,1930],{},"Event websites and conference pages use scrolling sponsor logos, often tiered by sponsorship level (platinum sponsors scroll larger, bronze sponsors scroll smaller).",[11,1932,1934],{"id":1933},"accessibility-considerations","Accessibility considerations",[16,1936,1937],{},"Continuous motion can be problematic for users with vestibular disorders or motion sensitivity. Follow these guidelines:",[74,1939,1941,1942],{"id":1940},"respect-prefers-reduced-motion","Respect ",[46,1943,596],{},[16,1945,1946],{},"Always include a media query that pauses or turns off the animation for users who have enabled reduced motion in their operating system settings:",[224,1948,1950],{"className":226,"code":1949,"language":228,"meta":229,"style":229},"@media (prefers-reduced-motion: reduce) {\n  .marquee-content {\n    animation-play-state: paused;\n  }\n}\n",[46,1951,1952,1958,1965,1977,1981],{"__ignoreMap":229},[233,1953,1954,1956],{"class":235,"line":236},[233,1955,609],{"class":239},[233,1957,612],{"class":246},[233,1959,1960,1963],{"class":235,"line":250},[233,1961,1962],{"class":253},"  .marquee-content",[233,1964,247],{"class":246},[233,1966,1967,1970,1972,1975],{"class":235,"line":259},[233,1968,1969],{"class":262},"    animation-play-state",[233,1971,627],{"class":246},[233,1973,1974],{"class":262},"paused",[233,1976,633],{"class":246},[233,1978,1979],{"class":235,"line":276},[233,1980,279],{"class":246},[233,1982,1983],{"class":235,"line":282},[233,1984,359],{"class":246},[74,1986,1988],{"id":1987},"provide-pause-controls","Provide pause controls",[16,1990,63,1991,1993],{},[46,1992,1901],{}," feature built into the generator allows mouse users to stop the animation. For keyboard and touch users, consider adding an explicit pause\u002Fplay button.",[74,1995,390,1997,2000],{"id":1996},"use-aria-hidden-on-the-duplicate",[46,1998,1999],{},"aria-hidden"," on the duplicate",[16,2002,2003,2004,2007],{},"The duplicated content exists only for the visual loop effect. Mark it with ",[46,2005,2006],{},"aria-hidden=\"true\""," so screen readers do not read the same content twice. The generated HTML includes this attribute automatically.",[74,2009,2011],{"id":2010},"do-not-rely-on-marquee-content-for-critical-information","Do not rely on marquee content for critical information",[16,2013,2014],{},"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,2016,2018],{"id":2017},"tips-for-effective-marquees","Tips for effective marquees",[20,2020,2021,2027,2033,2039,2045],{},[23,2022,2023,2026],{},[26,2024,2025],{},"Moderate speed."," 15–25 seconds per cycle is the sweet spot. Faster feels anxious; slower feels broken.",[23,2028,2029,2032],{},[26,2030,2031],{},"Consistent item sizes."," In logo bars, resize all logos to the same height for visual consistency. Different-sized logos look unprofessional.",[23,2034,2035,2038],{},[26,2036,2037],{},"Use edge fading."," The gradient mask at the edges prevents the jarring appearance and disappearance of items, making the scroll feel polished.",[23,2040,2041,2044],{},[26,2042,2043],{},"Limit to one or two per page."," Multiple marquees competing for attention reduce the effectiveness of each one.",[23,2046,2047,2050,2051,2054],{},[26,2048,2049],{},"Mobile test."," Ensure the marquee does not create horizontal overflow. Set ",[46,2052,2053],{},"overflow: hidden"," on the container.",[11,2056,645],{"id":644},[16,2058,2059,593,2062,593,2064],{},[26,2060,2061],{},"1. Is the HTML",[46,2063,1272],{},[26,2065,2066],{},"tag still supported?",[16,2068,63,2069,2071],{},[46,2070,1272],{}," 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,2073,2074],{},[26,2075,2076],{},"2. Can I create a vertical scrolling marquee?",[16,2078,677,2079,2081,2082,1866,2084,557],{},[65,2080,724],{"href":723}," supports four directions: left, right, up, and down. Vertical marquees use ",[46,2083,1865],{},[46,2085,1869],{},[16,2087,2088],{},[26,2089,2090],{},"3. Does the marquee work without JavaScript?",[16,2092,2093],{},"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,2095,2096],{},[26,2097,2098],{},"4. Is the CSS Marquee Generator free?",[16,2100,2101],{},"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,2103,2104],{},[26,2105,2106],{},"5. Can I use the marquee in React, Vue, or Angular?",[16,2108,2109],{},"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,2111,2112,2115,2116,2119],{},[26,2113,2114],{},"6. How do I make the marquee pause on hover?","\nAdd ",[46,2117,2118],{},"animation-play-state: paused"," on hover:",[224,2121,2123],{"className":226,"code":2122,"language":228,"meta":229,"style":229},".marquee-container:hover .marquee-content {\n  animation-play-state: paused;\n}\n",[46,2124,2125,2135,2146],{"__ignoreMap":229},[233,2126,2127,2130,2133],{"class":235,"line":236},[233,2128,2129],{"class":253},".marquee-container:hover",[233,2131,2132],{"class":253}," .marquee-content",[233,2134,247],{"class":246},[233,2136,2137,2140,2142,2144],{"class":235,"line":250},[233,2138,2139],{"class":262},"  animation-play-state",[233,2141,627],{"class":246},[233,2143,1974],{"class":262},[233,2145,633],{"class":246},[233,2147,2148],{"class":235,"line":259},[233,2149,359],{"class":246},[16,2151,2152],{},"The generator includes this automatically when the \"Pause on hover\" option is enabled.",[11,2154,2156],{"id":2155},"try-the-free-css-marquee-generator","Try the free CSS Marquee Generator.",[16,2158,63,2159,2161],{},[65,2160,1340],{"href":723}," 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,2163,710,2164,713,2166,713,2168,720,2170,557],{},[65,2165,480],{"href":67},[65,2167,556],{"href":555},[65,2169,483],{"href":548},[65,2171,719],{"href":718},[726,2173],{},[11,2175,731],{"id":730},[20,2177,2178,2184,2190,2195,2205],{},[23,2179,2180,2181,2183],{},"HTML Living Standard (WHATWG): the ",[46,2182,1272],{}," element is listed as obsolete and non-conforming",[23,2185,736,2186,739,2188,742],{},[46,2187,48],{},[46,2189,204],{},[23,2191,745,2192,2194],{},[46,2193,1754],{}," used in edge fading",[23,2196,753,2197,713,2199,713,2201,720,2203],{},[46,2198,399],{},[46,2200,1869],{},[46,2202,204],{},[46,2204,596],{},[23,2206,2207],{},"Web Content Accessibility Guidelines (WCAG) 2.1; Success Criterion 2.2.2 (Pause, Stop, Hide) and Success Criterion 2.3.3 (Animation from Interactions)",[767,2209,2210],{},"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":229,"searchDepth":250,"depth":250,"links":2212},[2213,2215,2220,2226,2233,2241,2242,2243,2244],{"id":1268,"depth":250,"text":2214},"The marquee is back,  but the \u003Cmarquee> tag is not",{"id":1334,"depth":250,"text":1335,"children":2216},[2217,2218,2219],{"id":1344,"depth":259,"text":1345},{"id":1369,"depth":259,"text":1370},{"id":182,"depth":259,"text":183},{"id":1469,"depth":250,"text":1470,"children":2221},[2222,2223,2224,2225],{"id":1473,"depth":259,"text":1474},{"id":1586,"depth":259,"text":1587},{"id":1747,"depth":259,"text":1748},{"id":1854,"depth":259,"text":1855},{"id":403,"depth":250,"text":404,"children":2227},[2228,2229,2230,2231,2232],{"id":1875,"depth":259,"text":1876},{"id":1905,"depth":259,"text":1906},{"id":1912,"depth":259,"text":1913},{"id":1919,"depth":259,"text":1920},{"id":1926,"depth":259,"text":1927},{"id":1933,"depth":250,"text":1934,"children":2234},[2235,2237,2238,2240],{"id":1940,"depth":259,"text":2236},"Respect prefers-reduced-motion",{"id":1987,"depth":259,"text":1988},{"id":1996,"depth":259,"text":2239},"Use aria-hidden on the duplicate",{"id":2010,"depth":259,"text":2011},{"id":2017,"depth":250,"text":2018},{"id":644,"depth":250,"text":645},{"id":2155,"depth":250,"text":2156},{"id":730,"depth":250,"text":731},"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":1263,"description":2246},"blog\u002Fcss-marquee-generator-guide-2026",[806,807,2254,2255],"Marquee Effect","Infinite Scroll","vB1F0DMwJOb-cz8tKGWZp_s53uSMDj6iWDUKqQxD6jk",1786688549211]