# Logo Showcase **URL:** https://community.elfsight.com/c/css-codes/logo-showcase/184.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Make all logos white (whitescale filter)](https://community.elfsight.com/t/make-all-logos-white-whitescale-filter/143623)
**Author:** [@Todd](https://community.elfsight.com/u/Todd)\ **Replies:** 1\ **Last updated:** [February 2, 2026, 12:51pm UTC](https://community.elfsight.com/t/make-all-logos-white-whitescale-filter/143623 "2026-02-02T12:51:24Z")
You need to use PNGs with transparent backgrounds and should use high quality logos but it works like a charm to turn all logos white if you want to run a dark background or a transparent background overlaying a photo. /… --- ## [Add shadow to logo containers](https://community.elfsight.com/t/add-shadow-to-logo-containers/128100)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 3\ **Last updated:** [December 12, 2025, 2:32pm UTC](https://community.elfsight.com/t/add-shadow-to-logo-containers/128100 "2025-12-12T14:32:46Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .eapp-logo-showcase-logo-component { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); } --- ## [Fading Edges](https://community.elfsight.com/t/fading-edges/142329)
**Author:** [@Rose\_Tran](https://community.elfsight.com/u/Rose_Tran)\ **Replies:** 1\ **Last updated:** [December 11, 2025, 9:23am UTC](https://community.elfsight.com/t/fading-edges/142329 "2025-12-11T09:23:09Z")
I couldn’t find a pre-existing solution and figured something out that worked for me. Add this code to the Custom CSS field on the Settings tab of your widget’s settings \[class\*="LogoShowcase\_\_Content-sc"\] { overflow… --- ## [Change ticker speed](https://community.elfsight.com/t/change-ticker-speed/140218)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [November 5, 2025, 10:11am UTC](https://community.elfsight.com/t/change-ticker-speed/140218 "2025-11-05T10:11:16Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .es-embed-root .rfm-marquee { --duration: 2s !important; } --- ## [Grayscale Filter to Logo with original color on hover](https://community.elfsight.com/t/grayscale-filter-to-logo-with-original-color-on-hover/41400)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 8\ **Last updated:** [August 18, 2025, 1:53pm UTC](https://community.elfsight.com/t/grayscale-filter-to-logo-with-original-color-on-hover/41400 "2025-08-18T13:53:30Z")
Not sure if widget has this option, but I can’t find it so I wrote this CSS. First you need to set this option Next, use CSS code div.eapp-logo-showcase-logo-inner:hover { filter: grayscale(0); -webkit-filt… --- ## [Make Ticker layout vertical](https://community.elfsight.com/t/make-ticker-layout-vertical/128034)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 26, 2025, 12:11pm UTC](https://community.elfsight.com/t/make-ticker-layout-vertical/128034 "2025-06-26T12:11:23Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .rfm-marquee-container { --transform: rotate(90deg) !important; } .rfm-marquee { --duration: 240s !important; } .e… --- ## [Change Ticker direction](https://community.elfsight.com/t/change-ticker-direction/76488)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 18, 2024, 8:43am UTC](https://community.elfsight.com/t/change-ticker-direction/76488 "2024-10-18T08:43:09Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .rfm-marquee { --direction: reverse !important; } --- ## [Make corners of the logo background rounded](https://community.elfsight.com/t/make-corners-of-the-logo-background-rounded/62823)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 24, 2024, 6:52pm UTC](https://community.elfsight.com/t/make-corners-of-the-logo-background-rounded/62823 "2024-07-24T18:52:37Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .eapp-logo-showcase-logo-component{ border-radius: 20px; } --- ## [Display 3 logos in a row on mobile (Grid layout)](https://community.elfsight.com/t/display-3-logos-in-a-row-on-mobile-grid-layout/62820)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 24, 2024, 6:44pm UTC](https://community.elfsight.com/t/display-3-logos-in-a-row-on-mobile-grid-layout/62820 "2024-07-24T18:44:01Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: @media (max-width: 500px) { .eapp-logo-showcase-grid-container { display: grid !important; grid-template-columns: repeat… --- ## [Move logos to the left (Grid layout)](https://community.elfsight.com/t/move-logos-to-the-left-grid-layout/34425)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 14, 2023, 11:45am UTC](https://community.elfsight.com/t/move-logos-to-the-left-grid-layout/34425 "2023-12-14T11:45:08Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .eapp-logo-showcase-grid-container { justify-content: flex-start; } --- ## [Center widget on the page (Logo Showcase)](https://community.elfsight.com/t/center-widget-on-the-page-logo-showcase/34427)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 14, 2023, 11:57am UTC](https://community.elfsight.com/t/center-widget-on-the-page-logo-showcase/34427 "2023-12-14T11:57:33Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: .global-styles, \[class^='RootLayout\_\_Component-sc-'\] { margin: 0 auto; } --- ## [Add borders to CTA button](https://community.elfsight.com/t/add-borders-to-cta-button/34445)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 14, 2023, 1:55pm UTC](https://community.elfsight.com/t/add-borders-to-cta-button/34445 "2023-12-14T13:55:13Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: \[class^='ButtonBase\_\_ButtonContainer-sc'\] { border: 4px solid #FF8300 !important; } --- ## [Change font of the title](https://community.elfsight.com/t/change-font-of-the-title/34446)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 14, 2023, 1:57pm UTC](https://community.elfsight.com/t/change-font-of-the-title/34446 "2023-12-14T13:57:35Z")
Add this code to the Custom CSS field on the Settings tab of your Logo Showcase widget’s settings: \[class^='WidgetTitle\_\_Inner-sc'\] { font-family: Times New Roman; } You are welcome to set any other font providing it… --- ## [Zoom Logo on Hover](https://community.elfsight.com/t/zoom-logo-on-hover/41401)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [February 19, 2024, 2:36pm UTC](https://community.elfsight.com/t/zoom-logo-on-hover/41401 "2024-02-19T14:36:48Z")
Use this CSS code to Settings \> Custom CSS. Adjust 1.5 to value what you want. .eapp-logo-showcase-logo-inner:hover { transform: scale(1.5); transition: transform 0.3s; } .eapp-logo-showcase-logo-inner { tra…