Home
UI-Templates
Animated Light/Dark Mode Toggle

Animated Light/Dark Mode Toggle

👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Transitions

Button Gradient Animation

Author UI-Templates

332

Fork Fullscreen

<div class="flex flex-col items-center space-y-6">
    <h1 class="text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-cyan-400">
      Dark Mode UI Toggle
    </h1>

<label class="relative inline-flex items-center cursor-pointer">
      <input id="theme-toggle" type="checkbox" class="sr-only">
      <div class="toggle-track w-14 h-[46px] rounded-full">
        <div class="toggle-btn flex items-center justify-center text-white text-sm font-bold">
          ☀️
        </div>
      </div>
    </label>

<p class="text-sm opacity-80 font-mono">
      Toggle between <span class="text-indigo-500">Light</span> and <span class="text-cyan-400">Dark</span> mode
    </p>
  </div>

// Load saved theme
    if (localStorage.theme === 'dark') {
      html.classList.add('dark');
      toggle.checked = true;
      knob.innerHTML = '🌙';
    }

// Toggle theme
    toggle.addEventListener('change', () => {
      if (toggle.checked) {
        html.classList.add('dark');
        localStorage.theme = 'dark';
        knob.innerHTML = '🌙';
      } else {
        html.classList.remove('dark');
        localStorage.theme = 'light';
        knob.innerHTML = '☀️';
      }
    });
  </script>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

Related Examples

Glowing gradient button
Button on black background

Author:
Md. Abu Taher

2 years ago

12.5k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

8 months ago

1k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

2.3k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

707
Github star button

Author:
Simon Scheffer

3 years ago

11k
Buttons set
buttons sets of, primary, outlined, text and link

Author:
Akram Khan

1 year ago

1.8k
sidebar elastico

Author:
Raul antonio de la cruz hernandez

6 months ago

568
Responsive Projects Section

Author:
ariaw

9 months ago

908
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

9 months ago

520
Buttons with shadow

Author:
Leon Bachmann

3 years ago

12.2k
button-neon-purple-super

Author:
Mohammad Rashel

1 month ago

232
Buttons

Author:
Maxim

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components