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 Formlar

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Canlı incele Formlar

Emoji Switch

Toggle with emoji that swaps between states.

#gradient #transform

Canlı incele Formlar

Flip Switch

Switch knob flips 180 degrees when toggled.

Canlı incele Formlar

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

Canlı incele Formlar

Shadow Lift Switch

Toggle knob lifts with shadow during transition.

#transform #shadow

Canlı incele Formlar

Spotlight Switch

Toggle with radial spotlight glow around knob when active.

#gradient #transform

Canlı incele Formlar

Bordered Textarea

Textarea with a colored left accent border.

#shadow #border

Canlı incele Formlar

Glassmorphism Textarea

Frosted glass textarea with translucent background.

#shadow #border #filter

Canlı incele Formlar

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Canlı incele Formlar

Flat Material Input

Flat material design input with no shadows or bevels.

Canlı incele Formlar

Light Glassmorphism Input

Light frosted glass input with soft white glow on focus.

#gradient #shadow #border

Canlı incele Formlar

Neumorphic Soft Input

Soft neumorphic input with inset shadow on focus.

#shadow #border

Canlı incele Formlar

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

Canlı incele Formlar

Valid Icon Input

Input with a checkmark icon that appears when valid.

#transform #shadow #border

Canlı incele Formlar

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Canlı incele Formlar

Valid Underline Input

Bottom underline grows in green when valid.

#transform #border

Canlı incele Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Canlı incele Hover

Acid Green Tint

Acid green tint pulses through on hover.

Canlı incele Hover

Blur Out

Element blurs out on hover.

Canlı incele Hover

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #transform

Canlı incele Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Canlı incele Hover

Border Draw Full

Border draws around all sides on hover.

Canlı incele Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Canlı incele Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Canlı incele Hover

Border Rainbow Flow

Rainbow border flows on hover.

#hover #animation #gradient

Canlı incele Hover

Bulge Center

Element bulges outward in center on hover.

#hover #transform

Canlı incele Hover

Bubblegum

Pink bubblegum tint on hover.

#hover #gradient

Canlı incele Hover

Color Burst Radial

Radial color burst emanates from center on hover.

#hover #gradient

Canlı incele Hover

Denim Blue

Denim blue tint on hover.

#hover #gradient

Canlı incele Hover

Jade Stone

Jade green stone tint on hover.

#hover #gradient

Canlı incele Hover

Lavender Mist

Soft lavender mist tint on hover.

#hover #gradient

Canlı incele Hover

Monochrome Shift

Element shifts to monochrome on hover.

#hover #transform #filter

Canlı incele Hover

Ruby Red

Deep ruby red glow on hover.

#hover #gradient

Canlı incele Hover

Sage Soft

Soft sage green tint on hover.

#hover #gradient

Canlı incele Hover

Color Shift BG

Background hue rotates continuously on hover.

#hover #animation #gradient

Canlı incele Hover

Sky Bright

Bright sky blue on hover.

#hover #gradient

Canlı incele Hover

Colour Split Word

The word tears into a red and cyan pair before snapping back together.

#hover #transform

Canlı incele Hover

Split CMYK

CMYK color channels separate on hover.

#hover #transform

Canlı incele Hover

Split RGB

RGB color channels split on hover.

#hover #animation #transform

Canlı incele Hover

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #border

Canlı incele Hover

Thermal Cold

Cool thermal colors flow on hover.

#hover #gradient

Canlı incele Hover

Topaz Yellow

Bright topaz yellow on hover.

#hover #gradient

Canlı incele Hover

Violet Dream

Dreamy violet gradient on hover.

#hover #gradient

Canlı incele Hover

Color Warp BG

Background warps through colors on hover.

#hover #gradient

Canlı incele Hover

Confetti Cannon

Confetti cannon blast on hover.

#hover #animation #transform

Canlı incele Hover

Confetti Fall

Confetti falls on hover.

#hover #animation #transform

Canlı incele Hover

Cool Overlay

Cool blue overlay washes in on hover.

#hover #gradient

Canlı incele Hover

Copper Warm

Warm copper glow radiates on hover.

#hover #gradient #transform

Canlı incele Hover

Curtain Open

Two colored curtains split apart horizontally to reveal content on hover.

#gradient #hover #shadow

Canlı incele Hover

Cyan Shift

Hue rotates to cyan on hover.

#hover #transform #filter

Canlı incele Hover

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

#animation #hover #border

Canlı incele Hover

Desaturate Fade

Color bleeds out to a faded tone on hover.

Canlı incele Hover

Desaturate Wash

Full grayscale wash with subtle blur on hover.

#hover #transform #filter

Canlı incele Hover

Dip Bounce

Dip down then bounce up on hover.

#hover #animation #transform

Canlı incele Hover

Dispersion Rainbow

Chromatic dispersion rainbow on hover.

#hover #transform

Canlı incele Hover

Dissolve to Dots

A dotted overlay fades in over the panel, dissolving the content into a dot matrix on hover.

#gradient #hover #border

Canlı incele Hover

Dissolve Grain

Grainy dissolve on hover.

Canlı incele Hover

Duotone Cyan

Duotone cyan-magenta filter kicks in on hover.

#hover #transform #filter

Canlı incele Hover

Duotone Red Blue

Red and blue duotone blend layers on hover.

Canlı incele Hover

Dust Settle

Dust settles down on hover.

Canlı incele Hover

Dust Swirl

Dust swirls around on hover.

#hover #animation #gradient

Canlı incele Hover

Flame Top Edge

Top edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Canlı incele Hover

Embers Float

Floating embers drift up on hover.

#hover #animation #transform

Canlı incele Hover

Embers Glow

Glowing embers rise on hover.

#hover #animation #shadow

Canlı incele Hover

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Canlı incele Hover

Fade In Fast

Quick fade-in on hover.

Canlı incele Hover

Fade In Zoom

Zoom fade-in on hover.

#hover #transform

Canlı incele Hover

Fire Flicker

Flickering firelight on hover.

#hover #animation #shadow

Canlı incele Hover

Fire Spark

Fire sparks flicker on hover.

#hover #animation #gradient

Canlı incele Hover

Fireflies Glow

Fireflies blink and float on hover.

#hover #animation #transform

Canlı incele Hover

Fireflies Wander

Fireflies wander randomly on hover.

#hover #animation #transform

Canlı incele Hover

Firelight Glow

Warm firelight ember glow on hover.

#hover #animation #shadow

Canlı incele Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Canlı incele Hover

Flip 3D Door

Door-swing 3D flip on hover.

#hover #transform #border

Canlı incele Hover

Flip 3D Page

Page-turn 3D flip on hover.

#hover #transform #shadow

Canlı incele Hover

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Canlı incele Hover

Card Front Back Flip

Flips card to reveal back side on hover.

#hover #transform #3d

Canlı incele Hover

Flip X Axis

Element flips on X axis on hover.

#hover #transform

Canlı incele Hover

Flip Y Axis

Element flips on Y axis on hover.

#hover #transform

Canlı incele Hover

Flip Y Fast

Quick Y flip on hover.

#hover #transform #3d

Canlı incele Hover

Fold Corner

Corner folds over on hover.

Canlı incele Hover

Fold Double

Double fold on hover.

#hover #transform #3d

Canlı incele Hover

Fold Up

Folds upward on hover.

#hover #transform #3d

Canlı incele Hover

Arrow Corner Frame

Arrow-shaped accents point inward at each corner on hover.

#hover #transform #border

Canlı incele Hover

Aurora Edge Frame

Aurora-like gradient drifts along the edge on hover.

#hover #animation #gradient

Canlı incele Hover

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

#hover #animation #transform

Canlı incele Hover

Curtain Fold Frame

Top and bottom curtain edges fold away on hover.

#hover #transform

Canlı incele Hover

Cyber Corner Frame

Cyberpunk-style corner brackets with glow trace on hover.

#hover #transform #shadow

Canlı incele Hover

Glitch Corner Frame

Corners glitch and shift on hover.

#hover #animation #transform

Canlı incele Hover

Laser Zap Frame

Laser beam zaps around the perimeter on hover.

#hover #animation #transform

Canlı incele Hover

Magnetic Pull Frame

Frame magnetically follows the cursor on hover.

#hover #transform #shadow

Canlı incele Hover

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

#hover #animation #gradient

Canlı incele Hover

Rainbow Arc Frame

Rainbow gradient arc traces the frame on hover.

#hover #animation #gradient

Canlı incele Hover

Shadow Frame

Layered colored shadows build a frame on hover.

#hover #transform #shadow

Canlı incele Hover

Sticker Lift Frame

Sticker-style frame lifts and peels on hover.

#hover #transform #border