LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#transform CSS efektleri

"transform" etiketiyle eşleşen 5.986 ücretsiz saf CSS efekti. Hepsi kopyala-yapıştır hazır; kullanmak için kütüphane veya derleme adımı gerekmez.

Canlı incele Formlar

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Canlı incele Formlar

Rotate Radio

Radio indicator rotates when selected for tactile feedback.

#transform #border

Canlı incele Formlar

Rounded Square Radio

Radio with rounded square indicator and gradient fill.

#gradient #transform #border

Canlı incele Formlar

Scale Radio

Selected radio option scales up its label text slightly.

#hover #gradient #transform

Canlı incele Formlar

Shadow Lift Radio

Radio card lifts with shadow when selected.

#transform #shadow #border

Canlı incele Formlar

Slide Indicator Radio

Radio with sliding indicator that moves between options.

#gradient #transform #border

Canlı incele Formlar

Spotlight Radio

Radio with radial spotlight glow on selected option.

#gradient #transform #border

Canlı incele Formlar

Square Radio

Radio with square indicator that fills solid on selection.

#transform #border

Canlı incele Formlar

Stacked Radio

Vertically stacked radio cards with prominent labels.

#transform #border

Canlı incele Formlar

Star Rating Radio

Radio styled as star rating with hover glow.

#hover #transform #shadow

Canlı incele Formlar

Tab Radio

Radio styled as tabs with bottom indicator bar.

#transform #border

Canlı incele Formlar

Tick Mark Radio

Radio with animated tick mark drawn when option is selected.

#transform #border

Canlı incele Formlar

Underline Radio

Radio option with sliding underline indicator on selection.

#hover #transform #border

Canlı incele Formlar

Custom Range Track

A slider with a gradient track and a thumb that grows a soft halo on focus.

#hover #gradient #shadow

Canlı incele Formlar

Required Asterisk Pulse

Input with a pulsing red asterisk indicating required.

#animation #transform #shadow

Canlı incele Formlar

Bordered Accent Search

Search bar with a colored left accent border.

#transform #shadow #border

Canlı incele Formlar

Card Style Search

Elevated card-style search bar with shadow.

#transform #shadow #border

Canlı incele Formlar

Search Bar with Clear

Search bar with a clear (×) button that appears when typing.

#hover #transform #shadow

Canlı incele Formlar

Color Cycling Search

Search bar whose border cycles colors on focus.

#animation #transform #shadow

Canlı incele Formlar

Cyberpunk Search Bar

Cyberpunk-styled search bar with terminal aesthetic.

#transform #shadow #border

Canlı incele Formlar

Dark Search Bar

Sleek dark-themed search bar.

#transform #shadow #border

Canlı incele Formlar

Expandable Search Bar

Search bar that expands from a single icon when clicked.

#transform #shadow #border

Canlı incele Formlar

Floating Label Search

Search bar with a floating label that animates on focus.

#transform #shadow #border

Canlı incele Formlar

Fullscreen Search Bar

Search bar that expands to a large full-width style on focus.

#transform #shadow #border

Canlı incele Formlar

Glow Search Bar

Search bar with a soft glow on focus.

#transform #shadow #border

Canlı incele Formlar

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

Animated Icon Search

Search bar whose magnifier icon rotates on focus.

#transform #shadow #border

Canlı incele Formlar

Light Search Bar

Clean light-themed search bar.

#transform #shadow #border

Canlı incele Formlar

Search with Loading Spinner

Search bar that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Formlar

Magnifier Search Bar

Classic search bar with magnifier icon that pulses on focus.

#transform #shadow #border

Canlı incele Formlar

Mic Search Bar

Search bar with a pulsing mic button on the right.

#hover #animation #transform

Canlı incele Formlar

Minimal Search Bar

Ultra-minimal search bar with thin border.

#transform #shadow #border

Canlı incele Formlar

Modern Search Bar

Sleek modern search bar with subtle shadow.

#transform #shadow #border

Canlı incele Formlar

Neon Search Bar

Cyberpunk neon search bar with glowing border.

#transform #shadow #border

Canlı incele Formlar

Overlay Search Bar

Search bar with an overlay style and shadow.

#transform #shadow #border

Canlı incele Formlar

Pill Search Bar

Pink-accented pill-shaped search bar.

#hover #transform #shadow

Canlı incele Formlar

Retro Terminal Search

Old terminal-style search bar with green phosphor.

#transform #shadow #border

Canlı incele Formlar

Rounded Search Bar

Fully rounded search bar with magnifier icon.

#transform #shadow #border

Canlı incele Formlar

Square Search Bar

Sharp-cornered square search bar with bold style.

#transform #border

Canlı incele Formlar

Underline Search Bar

Minimalist search bar with only an underline.

#transform #border

Canlı incele Formlar

Voice Search Bar

Search bar with a microphone icon for voice input.

#hover #transform #shadow

Canlı incele Formlar

Expanding Search Field

A circular icon that stretches into a full search field when it gains focus.

#border #transform #focus

Canlı incele Formlar

Custom Arrow Select

Native select with a custom animated dropdown arrow.

#transform #shadow #border

Canlı incele Formlar

Border Accent Select

Select with a left accent color border.

#transform #shadow #border

Canlı incele Formlar

Custom Select Arrow

A native select stripped of its default arrow, with a chevron that flips on focus.

#border #shadow #transform

Canlı incele Formlar

Dark Themed Select

Sleek dark select with glowing focus state.

#transform #shadow #border

Canlı incele Formlar

Glassmorphism Select

Frosted glass-styled select dropdown.

#transform #shadow #border

Canlı incele Formlar

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

Light Themed Select

Clean light-themed select with subtle shadow.

#transform #shadow #border

Canlı incele Formlar

Pill Select Dropdown

Pill-shaped select with colored accent.

#transform #shadow #border

Canlı incele Formlar

Rounded Select Dropdown

Fully rounded select with pill-shaped appearance.

#transform #shadow #border

Canlı incele Formlar

Underline Select Dropdown

Minimalist select with just an underline.

#transform #border

Canlı incele Formlar

Bounce Slider

Slider whose thumb bounces when dragged.

#animation #transform #shadow

Canlı incele Formlar

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Canlı incele Formlar

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Canlı incele Formlar

Rounded Slider

Range slider with rounded track and large rounded thumb.

#hover #gradient #transform

Canlı incele Formlar

Custom Thumb Slider

Range slider with a custom-styled large thumb.

#hover #transform #shadow

Canlı incele Formlar

Value Bubble Slider

Slider with a value bubble tooltip above the thumb.

#transform #shadow #border

Canlı incele Formlar

Active Filled State Input

Input that highlights when it has content using :not(:placeholder-shown).

#transform #shadow #border

Canlı incele Formlar

Disabled State Input

Input in disabled state with greyed out styling and not-allowed cursor.

#transform #border #filter

Canlı incele Formlar

Error State Input

Input showing error state with red border, glow and message.

#animation #transform #shadow

Canlı incele Formlar

Hover Lift Input

Input that lifts slightly with shadow on hover.

#hover #transform #shadow

Canlı incele Formlar

Loading Spinner Input

Input with loading spinner indicating async validation.

#animation #transform #shadow

Canlı incele Formlar

Readonly State Input

Readonly input with distinct styling that shows content cannot change.

#transform #border

Canlı incele Formlar

3D Switch

Switch with 3D depth and pressed knob effect.

#transform #shadow

Canlı incele Formlar

3D Press Switch

Switch knob depresses 3D-style when toggled.

#gradient #transform #shadow

Canlı incele Formlar

Material Switch

Material Design Android switch with ripple and elevated knob.

#transform #shadow

Canlı incele Formlar

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Canlı incele Formlar

Bold Switch

Bold chunky toggle with thick knob and prominent track.

#transform #border

Canlı incele Formlar

Bounce Switch

Toggle knob bounces in with springy overshoot motion.

#animation #transform

Canlı incele Formlar

Checkmark Switch

Toggle that displays a checkmark icon when active.

Canlı incele Formlar

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Canlı incele Formlar

Cyber Switch

Cyberpunk switch with angular shapes and glitch aesthetic.

#transform #shadow #border

Canlı incele Formlar

Dark Switch

Dark theme toggle with subtle elevated knob on activation.

#transform #shadow #border

Canlı incele Formlar

Disabled Switch

Toggle demonstrating disabled state with reduced opacity.

Canlı incele Formlar

Double Knob Switch

Toggle with two knobs that swap positions when toggled.

Canlı incele Formlar

Elastic Switch

Knob stretches elastically as it slides across track.

#animation #transform

Canlı incele Formlar

Fade Switch

Switch track fades between two color states smoothly.

Canlı incele Formlar

Fill Track Switch

Track fills with gradient from left when toggled on.

#gradient #transform

Canlı incele Formlar

Flat Switch

Minimal flat toggle with clean lines and simple motion.

#transform #shadow

Canlı incele Formlar

Fluent Switch

Microsoft Fluent design toggle with subtle motion and accent color.

#transform #border

Canlı incele Formlar

Glass Switch

Frosted glassmorphism switch with backdrop blur effect.

#gradient #transform #border

Canlı incele Formlar

Glow Switch

Switch that emits a colored glow when toggled on.

#transform #shadow #border

Canlı incele Formlar

Glowing Knob Switch

Toggle where the knob itself glows when active.

#transform #shadow

Canlı incele Formlar

Glow Ring Switch

Toggle with glowing ring around the track when active.

#transform #shadow

Canlı incele Formlar

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Canlı incele Formlar

Grid Switch

Switches arranged in a 2-column grid for compact settings.

#transform #border

Canlı incele Formlar

Grouped Switch

Switch group with section header for settings panel.

#hover #transform #border

Canlı incele Formlar

Icon Switch

Switch with sun/moon icon that swaps based on toggle state.

#gradient #transform

Canlı incele Formlar

Inverted Switch

Toggle with reversed color logic — track lightens when on.

Canlı incele Formlar

iOS Switch

Classic iOS-style toggle with smooth knob slide and green accent.

#transform #shadow

Canlı incele Formlar

Inline Label Switch

Switch with on/off text labels inside the track.

Canlı incele Formlar

Large Switch

Oversized toggle for accessibility-friendly prominent control.

#transform #shadow #border

Canlı incele Formlar

Light Switch

Light theme toggle with bright track and elevated knob.

#transform #shadow #border

Canlı incele Formlar

Magnetic Switch

Knob snaps magnetically into place when toggled.

#transform #shadow

Canlı incele Formlar

Material Rounded Switch

Material design full-rounded switch with prominent knob.

#transform #shadow