FreeToolsKit
FreeToolsKit
Image Format ConverterBeautify & MinifyPDF Tools
ss

CSS Switch Generator

Create custom animated CSS-only toggle switches

CSS Switch Generator

Generate custom toggle switches with pure CSS.

Settings
Width: 48px
Height: 26px
Speed: 0.3s
Active Color
CSS
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #e5e7eb;
  border-radius: 26px;
  transition: 0.3s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background-color: #6366f1; }
.switch input:checked + .slider::before { transform: translateX(22px); }

Related Tools in CSS Tools

Background Gradient

Generate CSS gradient backgrounds

Background Image

Generate CSS background image code

Blur

Generate CSS blur filter effects

Border Image

Generate CSS border-image properties

Border Radius

Generate CSS border-radius properties

Border

Generate CSS border properties

Box Shadow

Generate CSS box-shadow effects

Brightness

Generate CSS brightness filters

Columns

Generate CSS multi-column layouts

Contrast

Generate CSS contrast filters

Cursor

Generate CSS cursor properties

Display

Generate CSS display properties

Drop Shadow

Generate CSS drop-shadow filters

Grayscale

Generate CSS grayscale filters

Hue Rotate

Generate CSS hue-rotate filters

Invert

Generate CSS invert filters

Keyframe Animation

Generate CSS keyframe animations

Letter Spacing

Generate CSS letter-spacing properties

Line Height

Generate CSS line-height properties

List Style

Generate CSS list-style properties

Opacity

Generate CSS opacity properties

Outline

Generate CSS outline properties

Overflow Wrap

Generate CSS overflow-wrap properties

Overflow

Generate CSS overflow properties

Perspective

Generate CSS perspective transforms

Rotate

Generate CSS rotation transforms

Saturate

Generate CSS saturate filters

Scale

Generate CSS scaling transforms

Sepia

Generate CSS sepia filters

Skew

Generate CSS skew transforms

Tab Size

Generate CSS tab-size properties

Text Align

Generate CSS text-align properties

Text Color

Generate CSS color properties

Text Decoration

Generate CSS text-decoration properties

Text Indent

Generate CSS text-indent properties

Text Shadow

Generate CSS text-shadow effects

Text Transform

Generate CSS text-transform properties

Transition

Generate CSS transition properties

Translate

Generate CSS translation transforms

Visibility

Generate CSS visibility properties

White Space

Generate CSS white-space properties

Word Spacing

Generate CSS word-spacing properties

Background Color

Generate CSS background-color values

CSS Generator

Browse every CSS property generator in one place

Minifiers

Minify HTML, CSS, and JavaScript code

Glassmorphism Generator

Generate frosted glass CSS effects with backdrop blur and transparency

CSS Grid Builder

Visually build CSS Grid layouts with live preview and code export

Flexbox Builder

Visually build Flexbox layouts with live preview and code export

Box Shadow Generator

Generate CSS box-shadow with multiple layers and preset examples

CSS Loader Animation Generator

Generate loading spinner and progress bar animations

CSS Checkbox Generator

Create custom animated CSS-only checkboxes

Clip Path Generator

Create custom CSS clip-path shapes with live preview

Background Pattern Generator

Create custom CSS background patterns with live preview

Cubic Bezier Generator

Create custom CSS cubic-bezier easing curves visually

Text Glitch Effect Generator

Create CSS glitch text effects with live preview

Triangle Generator

Create CSS triangles of any size and color