Metal Toggles Collection in Framer

Copy component

Metal Toggles Collection in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

New

New

New

Component

Metal Toggles Collection in Framer

This is a metal toggles collection in Framer, recreated from by Raul’s original work. You can remix or copy the component to dig in how layered gradients and shadows come together to build rich toggle interactions in Framer without any code.

image of Nandi Muzsik
image of Prianca S.
Image of Raul

Created by

Toggle switch variants in metallic, azure, emerald, and bronze
Toggle switch variants in metallic, azure, emerald, and bronze
Toggle switch variants in metallic, azure, emerald, and bronze

About the resource

I built this metal toggles collection by layering gradients, shadows, and subtle depth details to get that rich, metallic feel. Each toggle is made using five layers, where every layer has its own linear gradient and shadow for depth. Stacking these layers together helps create a more realistic, tactile look and shows how far you can push visual detailing in Framer.

About the resource

I built this metal toggles collection by layering gradients, shadows, and subtle depth details to get that rich, metallic feel. Each toggle is made using five layers, where every layer has its own linear gradient and shadow for depth. Stacking these layers together helps create a more realistic, tactile look and shows how far you can push visual detailing in Framer.

About the resource

I built this metal toggles collection by layering gradients, shadows, and subtle depth details to get that rich, metallic feel. Each toggle is made using five layers, where every layer has its own linear gradient and shadow for depth. Stacking these layers together helps create a more realistic, tactile look and shows how far you can push visual detailing in Framer.

Metallic toggle switches showing on and off states variations

The multiple variants of the metal toggle component.

Metallic toggle switches showing on and off states variations

The multiple variants of the metal toggle component.

Metallic toggle switches showing on and off states variations

The multiple variants of the metal toggle component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D globe component with wireframe earth visualization

    Interactive Animated 3D Globe for Framer

    Component

    3D globe component with wireframe earth visualization

    Interactive Animated 3D Globe for Framer

    Component

    3D globe component with wireframe earth visualization

    Interactive Animated 3D Globe for Framer

    Component

  • Radial action menu with download, share, and edit options

    Circular Navigation Button in Framer

    Component

    Radial action menu with download, share, and edit options

    Circular Navigation Button in Framer

    Component

    Radial action menu with download, share, and edit options

    Circular Navigation Button in Framer

    Component