MultiLipi offers 20+ built-in language switcher templates to get you started quickly. However, if you want your language toggle to perfectly match your brand's unique aesthetic, you can use our Custom CSS feature to override the default styles.
In your Switcher Editor, simply click the </> Edit CSS button at the top of the screen and paste in your code.
To help you get inspired, our design team has created 5 premium CSS templates. Simply copy the code snippets below and paste them into your Custom CSS editor!
What is Custom CSS and Why Should You Use It?
CSS (Cascading Style Sheets) is the design language that controls how websites look. Think of it as the "makeup and clothing" for your website. With Custom CSS, you can change colors, shapes, animations, shadows, and more—without touching any complex code.
Brand Consistency
Match your exact brand colors, fonts, and style guidelines
Stand Out
Create unique designs that differentiate you from competitors
No Developer Needed
Copy and paste ready-made code—no coding skills required
SEO-Friendly
All designs are optimized for performance and accessibility
How to Apply These Designs (Step-by-Step)
Open Your Switcher Editor
Log in to your MultiLipi dashboard and navigate to your Language Switcher settings.
Click the "</> Edit CSS" Button
Look for the Custom CSS button at the top of your Switcher Editor interface.
Copy Your Chosen Design
Scroll down to the design templates below and click the "Copy Code" button on your favorite style.
Paste the Code
Paste the copied CSS code into the Custom CSS editor panel.
Customize (Optional)
Adjust colors, sizes, or fonts to match your brand. We'll explain common customizations below.
Save & Preview
Click "Save Changes" and preview your switcher live on your website!
5 Premium Design Templates
Click "Copy Code" to instantly grab the CSS. These snippets target the default .ml-switcher-containerऔर .ml-switcher-btn classes.
1. The "Enterprise Pill"
The Vibe: A classic, information-dense dropdown trigger designed to build trust. It uses clean borders, soft shadows, and subtle hover interactions to feel rock-solid and professional.
✨ Best for: Corporate sites, B2B SaaS, Finance, and Healthcare
/* Style the main toggle button */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. The "Editorial Text" Inline
The Vibe: Minimalist, text-centric design using elegant serif typography and zero borders. It relies on a gentle, animated underline to show interactivity without disrupting the site's aesthetic.
✨ Best for: High-fashion, luxury brands, editorial magazines, and boutique portfolios
/* Remove all background containers */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Style the text buttons */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Muted grey */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* The Animated Underline */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. The "Dynamic Island"
The Vibe: A mobile-first design that styles the toggle as a sleek pill, highlighting the active language with a soft blue background morphing effect.
✨ Best for: Modern tech startups, consumer apps, and minimalist landing pages
/* Style the main container wrapper */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* Style the individual pill buttons */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* Active Language State */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. The "Dark Tech Terminal"
The Vibe: Inspired by developer tools and Web3 platforms. It uses a high-contrast dark theme, a sleek monospace-hybrid font layout, and a subtle electric blue glow on hover.
✨ Best for: Developer documentation, Web3 projects, crypto platforms, and dark-mode SaaS
/* Style the main toggle button */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. The "Centered Focus" Modal (CSS Hack)
The Vibe: Inspired by massive global brands. This brilliant CSS hack forces a standard dropdown to detach and expand into a full-screen, blurred overlay with centered language cards.
✨ Best for: Global enterprise, massive e-commerce, complex software suites
/* 1. Style the main trigger button */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. THE HACK: Turn the dropdown into a full-screen overlay */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Center the items in the middle of the screen */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remove default dropdown styling */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style the individual language items as large modal cards */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* Hover state for the modal cards */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}Easy Customization Guide (For Non-Technical Users)
Want to tweak these designs to match your brand perfectly? Here are the most common customizations you can make:
🎨 Changing Colors
Look for color codes like #3B82F6नहीं तो rgba(59, 130, 246, 0.5). Replace these with your brand colors.
Example: Change background: #3B82F6;तक background: #FF6B6B; (your brand color)
📏 Adjusting Sizes
छोटे सिक्के padding, font-sizeनहीं तो border-radius values to make the button bigger or smaller.
उदाहरण: padding: 8px 16px; → padding: 12px 24px; (larger button)
✍️ Changing Fonts
Update font-family to match your website's typography.
उदाहरण: font-family: 'Inter'; → font-family: 'Roboto';
Best Practices & Optimization Tips
Test on Mobile Devices
Always preview your custom switcher on mobile phones and tablets. Over 60% of global web traffic is mobile.
Use High Contrast for Accessibility
Ensure text and background have enough color contrast (aim for 4.5:1 ratio) for users with visual impairments.
Keep Animations Subtle
Flashy animations can distract users. Stick to smooth transitions under 0.3 seconds.
Avoid Overriding Core Functionality
Don't hide the switcher completely or make it unclickable. Users need to access it easily.
Match Your Website's Theme
Choose a design that complements your existing site design. Don't make it stand out awkwardly.
Common Mistakes to Avoid
Using too many animations at once—it slows down your site
Setting font sizes below 12px—users can't read tiny text
Forgetting to test in different browsers (Chrome, Safari, Firefox)
Copying CSS from untrusted sources—always use official templates
Not saving a backup before making major changes
Performance Impact
All these CSS designs are ultra-lightweight and will not slow down your website. CSS is rendered instantly by the browser, and these styles add less than 2KB to your page size.
For reference, 2KB is about the size of a single emoji. Your website speed and SEO rankings will remain unaffected. ✨
नोट: These snippets target the default .ml-switcher-containerऔर .ml-switcher-btn classes. Adjust the class names if you are using a radically different base template.