LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

Öne çıkanlar

En popüler CSS efektleri

Kütüphanedeki 10.238 efekt, en çok incelenenden başlayarak sıralandı. Hepsi saf CSS — kopyala, yapıştır, çalışır; kütüphane veya derleme adımı gerekmez.

Canlı incele Onay Kutuları

Baseball Toggle

A baseball bounces white on check.

#animation #transform #shadow

Canlı incele Onay Kutuları

Bat Fly Toggle

A bat flutters with a dark glow when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Beamed Sixteenths Toggle

Beamed sixteenth notes scale in teal when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Bedbug Toggle

A bedbug rotates red on check.

#transform #shadow #filter

Canlı incele Onay Kutuları

Bounce Spring Checkmark

A checkmark that pops in with a springy bounce when the checkbox is toggled on.

#border #transform #rotate

Canlı incele Onay Kutuları

Bounce Pop Checkbox

The whole control squashes and springs back the moment the state changes.

#animation #transform #border

Canlı incele Onay Kutuları

Circuit Trace Checkbox

Current runs along an SVG circuit path and lights the pad at the far end.

#svg #stroke #border

Canlı incele Onay Kutuları

Coin Flip Toggle

A coin spins gold when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Color Sweep Check

A diagonal color sweep wipes across the checkbox leaving the checkmark behind when checked.

#gradient #border #transform

Canlı incele Onay Kutuları

Constellation Connect

Stars connect with lines to form a constellation when checked.

#border #svg #stroke

Canlı incele Onay Kutuları

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Canlı incele Onay Kutuları

Dragonfly Toggle

A dragonfly slides in blue when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Drawn Path Checkbox

An SVG tick draws itself stroke by stroke using a dash offset transition.

#border #svg #stroke

Canlı incele Onay Kutuları

Duck Toggle

A duck flips orange when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Emerald Green Gem

A step-cut emerald shows deep green facets when checked.

#gradient #shadow #border

Canlı incele Onay Kutuları

Falcon Toggle

A falcon shakes brown when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Fig Toggle

A fig fades in purple when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Fold Flip Checkbox

The box rotates on its X axis and lands on a green face carrying the tick.

#transform #border #3d

Canlı incele Onay Kutuları

Frosted Glass Checkbox

The blur lifts off a frosted pane and the mark behind it comes into focus.

#filter #gradient #border

Canlı incele Onay Kutuları

Giraffe Tall Toggle

A giraffe brightens with a yellow glow when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Glassmorphism Rose

A frosted glass effect with rose tint and checkmark when checked.

#transform #shadow #border

Canlı incele Onay Kutuları

Has-Selector Select All

The parent row reads its children through :has() and reports partial or full.

#border #shadow #transform

Canlı incele Onay Kutuları

Jasper Spotted Stone

A red jasper stone with speckled pattern appears when checked.

#gradient #shadow #border

Canlı incele Onay Kutuları

Leaf Grow Toggle

A leaf emoji grows in from a small scale with a green glow when checked.

#shadow #transform #filter

Canlı incele Onay Kutuları

Leaf Miner Toggle

A leaf miner flips green when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Lever Pull Checkbox

A mechanical lever swings from the off notch down into the on notch.

#transform #border #lever

Canlı incele Onay Kutuları

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Minimal Line Check

A clean, borderless minimal check whose mark fades in softly when toggled on.

#border #transform #rotate

Canlı incele Onay Kutuları

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Number 1 Toggle

Number 1 scales up blue when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Paw Print Toggle

A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.

#shadow #transform #filter

Canlı incele Onay Kutuları

Plug Power Toggle

A plug glows yellow when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Plum Toggle

A plum flips purple when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Quarter Note Toggle

A quarter note symbol fades in blue when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Quartz Cluster Toggle

A cluster of quartz points lights up when checked.

#gradient #border

Canlı incele Onay Kutuları

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

#animation #clip-path #gradient

Canlı incele Onay Kutuları

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

#animation #shadow #transform

Canlı incele Onay Kutuları

Sunset Dusk Toggle

A sunset glows warm when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Minus Math Symbol Toggle

A minus math symbol that turns red when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Omega Symbol Toggle

The Greek omega letter fades violet when checked.

#shadow #filter

Canlı incele Onay Kutuları

Theta Symbol Toggle

The Greek theta letter scales pink when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Glass Texture Toggle

A frosted glass texture with blue tint when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Tornado Spin Toggle

A tornado spins gray when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Willet Toggle

A willet flips gray when checked.

#transform #shadow #filter

Canlı incele Formlar

Glowing Background Input

Background glows brightly on focus, color seeping outward.

#gradient #shadow #border

Canlı incele Formlar

Gradient Background Input

Input with an animated gradient background that shifts on focus.

#gradient #shadow #border

Canlı incele Formlar

Mesh Background Input

Input with a vibrant mesh gradient background.

#gradient #shadow #border

Canlı incele Formlar

Neon Background Input

Dark input with neon glow background on focus.

#gradient #shadow #border

Canlı incele Formlar

Sunken Input

Deeply sunken input that appears pressed into surface.

#shadow #border

Canlı incele Formlar

3D Border Input

Skeuomorphic 3D raised border that depresses on focus.

#transform #shadow #border

Canlı incele Formlar

Full Border Draw Input

Border draws itself around the input clockwise when focused.

Canlı incele Formlar

Fire Border Input

Animated fire-effect border using layered gradients.

#animation #gradient #border

Canlı incele Formlar

Ice Border Input

Icy frosted border with crystalline shimmer.

#shadow #border

Canlı incele Formlar

Inset Border Input

Sunken inset border that pops out on focus.

#shadow #border

Canlı incele Formlar

Multi Color Border Input

Each side of the border has a different animated color.

#gradient #border

Canlı incele Formlar

Rainbow Border Input

Border continuously cycles through rainbow hues.

#animation #gradient #border

Canlı incele Formlar

Retro Terminal Border

Old terminal-style input with chunky inset border.

#shadow #border

Canlı incele Formlar

Blur Floating Label

Label starts blurred then sharpens as it lifts to the top.

#transform #border #filter

Canlı incele Formlar

Color Shift Floating Label

Label transitions through multiple hues when input is active.

#animation #transform #border

Canlı incele Formlar

Curve Floating Label

Label arcs upward in a curved path using transform-origin trick.

#transform #shadow #border

Canlı incele Formlar

Cyan Accent Floating Label

Crisp cyan-themed floating label input.

#transform #shadow #border

Canlı incele Formlar

Emerald Accent Floating Label

Calm emerald-themed floating label for signup forms.

#transform #shadow #border

Canlı incele Formlar

Floating Label Fade

Label fades and floats up smoothly using opacity transitions.

Canlı incele Formlar

iOS Style Floating Label

Clean iOS-style input with rounded corners and subtle floating label.

#shadow #border

Canlı incele Formlar

Floating Label Slide Up

Classic floating label that slides up when the input is focused or filled.

#transform #shadow #border

Canlı incele Formlar

Violet Accent Floating Label

Violet-themed floating label input with soft glow.

#transform #shadow #border

Canlı incele Formlar

Animating Icon Input

Input whose left icon bounces when input is focused.

#animation #transform #shadow

Canlı incele Formlar

Circle Icon Input

Input with circular icon container on the left.

#transform #shadow #border

Canlı incele Formlar

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #transform #shadow

Canlı incele Formlar

Email Icon Input

Email input with envelope icon that opens on focus.

#transform #shadow #border

Canlı incele Formlar

Flip Icon Input

Input whose icon flips 180 degrees on focus.

#transform #shadow #border

Canlı incele Formlar

Grow Icon Input

Input whose icon grows in size when focused.

#transform #shadow #border

Canlı incele Formlar

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

#transform #shadow #border

Canlı incele Formlar

Tag Icon Input

Tag input with tag icon that flips in on focus.

#transform #shadow #border

Canlı incele Formlar

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Canlı incele Formlar

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Canlı incele Formlar

Credit Card Preview

Credit card visual preview that updates on input focus.

#gradient #transform #shadow

Canlı incele Formlar

Property Focus Ring

Focusing the field animates a registered angle so the gradient ring circles it once.

#animation #gradient #at-property

Canlı incele Formlar

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Canlı incele Formlar

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Canlı incele Formlar

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Canlı incele Formlar

Thumbs Radio

Thumbs up/down radio feedback with smooth transition.

#hover #transform #filter

Canlı incele Formlar

3D Search Bar

Skeuomorphic 3D search bar with depth.

#transform #shadow #border

Canlı incele Formlar

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Canlı incele Formlar

Light Themed Select

Clean light-themed select with subtle shadow.

#transform #shadow #border

Canlı incele Formlar

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Canlı incele Formlar

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#shadow #border