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