Galeria: 200 efektów UI

Do góry

Kliknij kartę, aby zobaczyć efekt

Każdy efekt ma osobną zakładkę – HTML/CSS/JS bez zależności.

ScrollHoverBackgroundLoadersUI
#001

Reveal: fade-in

Kliknij, aby zobaczyć demo
#002

Reveal: slide-up

Kliknij, aby zobaczyć demo
#003

Reveal: slide-down

Kliknij, aby zobaczyć demo
#004

Reveal: slide-left

Kliknij, aby zobaczyć demo
#005

Reveal: slide-right

Kliknij, aby zobaczyć demo
#006

Reveal: zoom-in

Kliknij, aby zobaczyć demo
#007

Reveal: zoom-out

Kliknij, aby zobaczyć demo
#008

Reveal: rotate-in-z

Kliknij, aby zobaczyć demo
#009

Reveal: rotate-in-x

Kliknij, aby zobaczyć demo
#010

Reveal: rotate-in-y

Kliknij, aby zobaczyć demo
#011

Reveal: blur-in

Kliknij, aby zobaczyć demo
#012

Reveal: skew-x

Kliknij, aby zobaczyć demo
#013

Reveal: skew-y

Kliknij, aby zobaczyć demo
#014

Reveal: clip-vertical

Kliknij, aby zobaczyć demo
#015

Reveal: clip-horizontal

Kliknij, aby zobaczyć demo
#016

Reveal: flip-in-x

Kliknij, aby zobaczyć demo
#017

Reveal: flip-in-y

Kliknij, aby zobaczyć demo
#018

Reveal: long distance

Kliknij, aby zobaczyć demo
#019

Reveal: scale+rotate

Kliknij, aby zobaczyć demo
#020

Reveal: slide-zoom

Kliknij, aby zobaczyć demo
#021

Reveal: fade-in (fast)

Kliknij, aby zobaczyć demo
#022

Reveal: fade-in (slow)

Kliknij, aby zobaczyć demo
#023

Reveal: pop-in

Kliknij, aby zobaczyć demo
#024

Reveal: drop-in

Kliknij, aby zobaczyć demo
#025

Reveal: rise-in

Kliknij, aby zobaczyć demo
#026

Reveal: blur+scale

Kliknij, aby zobaczyć demo
#027

Reveal: overshoot

Kliknij, aby zobaczyć demo
#028

Reveal: rotate small

Kliknij, aby zobaczyć demo
#029

Reveal: perspective y

Kliknij, aby zobaczyć demo
#030

Reveal: perspective x

Kliknij, aby zobaczyć demo
#031

Reveal: left long

Kliknij, aby zobaczyć demo
#032

Reveal: right long

Kliknij, aby zobaczyć demo
#033

Reveal: bounce in

Kliknij, aby zobaczyć demo
#034

Reveal: elastic

Kliknij, aby zobaczyć demo
#035

Reveal: mask circle

Kliknij, aby zobaczyć demo
#036

Reveal: mask diamond

Kliknij, aby zobaczyć demo
#037

Reveal: underline grow

Kliknij, aby zobaczyć demo
#038

Reveal: stagger list

Kliknij, aby zobaczyć demo
#039

Reveal: columns

Kliknij, aby zobaczyć demo
#040

Reveal: cards grid

Kliknij, aby zobaczyć demo
#041

Hover: underline grow

Kliknij, aby zobaczyć demo
#042

Hover: underline slide

Kliknij, aby zobaczyć demo
#043

Hover: glow neon

Kliknij, aby zobaczyć demo
#044

Hover: jelly

Kliknij, aby zobaczyć demo
#045

Hover: shake

Kliknij, aby zobaczyć demo
#046

Hover: bounce

Kliknij, aby zobaczyć demo
#047

Hover: pulse

Kliknij, aby zobaczyć demo
#048

Hover: gradient text

Kliknij, aby zobaczyć demo
#049

Hover: border grow

Kliknij, aby zobaczyć demo
#050

Hover: long shadow

Kliknij, aby zobaczyć demo
#051

Hover: inner shadow

Kliknij, aby zobaczyć demo
#052

Hover: grayscale→color img

Kliknij, aby zobaczyć demo
#053

Hover: blur→sharp img

Kliknij, aby zobaczyć demo
#054

Hover: zoom rotate img

Kliknij, aby zobaczyć demo
#055

Hover: tilt 3D

Kliknij, aby zobaczyć demo
#056

Hover: border rainbow

Kliknij, aby zobaczyć demo
#057

Hover: shine

Kliknij, aby zobaczyć demo
#058

Hover: text fill swipe

Kliknij, aby zobaczyć demo
#059

Hover: press inset

Kliknij, aby zobaczyć demo
#060

Hover: pop

Kliknij, aby zobaczyć demo
#061

Hover: skew

Kliknij, aby zobaczyć demo
#062

Hover: rotate

Kliknij, aby zobaczyć demo
#063

Hover: outline glow

Kliknij, aby zobaczyć demo
#064

Hover: gradient move

Kliknij, aby zobaczyć demo
#065

Hover: underline dotted

Kliknij, aby zobaczyć demo
#066

Hover: corner lift

Kliknij, aby zobaczyć demo
#067

Hover: flip-y

Kliknij, aby zobaczyć demo
#068

Hover: flip-x

Kliknij, aby zobaczyć demo
#069

Hover: badge wiggle

Kliknij, aby zobaczyć demo
#070

Hover: letter spacing

Kliknij, aby zobaczyć demo
#071

Hover: image pan

Kliknij, aby zobaczyć demo
#072

Hover: bg blur

Kliknij, aby zobaczyć demo
#073

Hover: border dash

Kliknij, aby zobaczyć demo
#074

Hover: long press (scale)

Kliknij, aby zobaczyć demo
#075

Hover: rotate 3D

Kliknij, aby zobaczyć demo
#076

Hover: grayscale card

Kliknij, aby zobaczyć demo
#077

Hover: opacity dim

Kliknij, aby zobaczyć demo
#078

Hover: elevate + shadow

Kliknij, aby zobaczyć demo
#079

Hover: border radiate

Kliknij, aby zobaczyć demo
#080

Hover: underline gradient

Kliknij, aby zobaczyć demo
#081

Hover: border offset

Kliknij, aby zobaczyć demo
#082

Hover: ripple outline

Kliknij, aby zobaczyć demo
#083

Hover: scale 1.04

Kliknij, aby zobaczyć demo
#084

Hover: scale 1.05

Kliknij, aby zobaczyć demo
#085

Hover: scale 1.06

Kliknij, aby zobaczyć demo
#086

Hover: scale 1.07

Kliknij, aby zobaczyć demo
#087

Hover: scale 1.08

Kliknij, aby zobaczyć demo
#088

Hover: scale 1.09

Kliknij, aby zobaczyć demo
#089

Hover: scale 1.02

Kliknij, aby zobaczyć demo
#090

Hover: scale 1.03

Kliknij, aby zobaczyć demo
#091

Hover: scale 1.04

Kliknij, aby zobaczyć demo
#092

Hover: scale 1.05

Kliknij, aby zobaczyć demo
#093

Hover: scale 1.06

Kliknij, aby zobaczyć demo
#094

Hover: scale 1.07

Kliknij, aby zobaczyć demo
#095

Hover: scale 1.08

Kliknij, aby zobaczyć demo
#096

Hover: scale 1.09

Kliknij, aby zobaczyć demo
#097

Hover: scale 1.02

Kliknij, aby zobaczyć demo
#098

Hover: scale 1.03

Kliknij, aby zobaczyć demo
#099

Hover: scale 1.04

Kliknij, aby zobaczyć demo
#100

Hover: scale 1.05

Kliknij, aby zobaczyć demo
#101

Loader: ring spin

Kliknij, aby zobaczyć demo
#102

Loader: dual ring

Kliknij, aby zobaczyć demo
#103

Loader: dots 3 bounce

Kliknij, aby zobaczyć demo
#104

Loader: bars wave

Kliknij, aby zobaczyć demo
#105

Loader: square flip

Kliknij, aby zobaczyć demo
#106

Loader: ripple circles

Kliknij, aby zobaczyć demo
#107

Loader: radial conic

Kliknij, aby zobaczyć demo
#108

Loader: text ellipsis

Kliknij, aby zobaczyć demo
#109

Loader: hourglass

Kliknij, aby zobaczyć demo
#110

Loader: dot pulse 1

Kliknij, aby zobaczyć demo
#111

Loader: dot pulse 2

Kliknij, aby zobaczyć demo
#112

Loader: dot pulse 3

Kliknij, aby zobaczyć demo
#113

Loader: dot pulse 4

Kliknij, aby zobaczyć demo
#114

Loader: dot pulse 5

Kliknij, aby zobaczyć demo
#115

Loader: dot pulse 6

Kliknij, aby zobaczyć demo
#116

Loader: dot pulse 7

Kliknij, aby zobaczyć demo
#117

Loader: dot pulse 8

Kliknij, aby zobaczyć demo
#118

Loader: dot pulse 9

Kliknij, aby zobaczyć demo
#119

Loader: dot pulse 10

Kliknij, aby zobaczyć demo
#120

Loader: dot pulse 11

Kliknij, aby zobaczyć demo
#121

Loader: dot pulse 12

Kliknij, aby zobaczyć demo
#122

Loader: dot pulse 13

Kliknij, aby zobaczyć demo
#123

Loader: dot pulse 14

Kliknij, aby zobaczyć demo
#124

Loader: dot pulse 15

Kliknij, aby zobaczyć demo
#125

Loader: dot pulse 16

Kliknij, aby zobaczyć demo
#126

Loader: dot pulse 17

Kliknij, aby zobaczyć demo
#127

Loader: dot pulse 18

Kliknij, aby zobaczyć demo
#128

Loader: dot pulse 19

Kliknij, aby zobaczyć demo
#129

Loader: dot pulse 20

Kliknij, aby zobaczyć demo
#130

Background: animated gradient

Kliknij, aby zobaczyć demo
#131

Background: diagonal stripes

Kliknij, aby zobaczyć demo
#132

Background: grid move

Kliknij, aby zobaczyć demo
#133

Background: starfield

Kliknij, aby zobaczyć demo
#134

Background: bubbles

Kliknij, aby zobaczyć demo
#135

Background: waves (SVG)

Kliknij, aby zobaczyć demo
#136

Background: spotlight (mouse)

Kliknij, aby zobaczyć demo
#138

Background: gradient stripes 1

Kliknij, aby zobaczyć demo
#139

Background: gradient stripes 2

Kliknij, aby zobaczyć demo
#140

Background: gradient stripes 3

Kliknij, aby zobaczyć demo
#141

Background: gradient stripes 4

Kliknij, aby zobaczyć demo
#142

Background: gradient stripes 5

Kliknij, aby zobaczyć demo
#143

Background: gradient stripes 6

Kliknij, aby zobaczyć demo
#144

Background: gradient stripes 7

Kliknij, aby zobaczyć demo
#145

Background: gradient stripes 8

Kliknij, aby zobaczyć demo
#146

Background: gradient stripes 9

Kliknij, aby zobaczyć demo
#147

Background: gradient stripes 10

Kliknij, aby zobaczyć demo
#148

Background: gradient stripes 11

Kliknij, aby zobaczyć demo
#149

Background: gradient stripes 12

Kliknij, aby zobaczyć demo
#150

Background: gradient stripes 13

Kliknij, aby zobaczyć demo
#151

Background: gradient stripes 14

Kliknij, aby zobaczyć demo
#152

Background: gradient stripes 15

Kliknij, aby zobaczyć demo
#153

Background: gradient stripes 16

Kliknij, aby zobaczyć demo
#154

Background: gradient stripes 17

Kliknij, aby zobaczyć demo
#155

Background: gradient stripes 18

Kliknij, aby zobaczyć demo
#156

Background: gradient stripes 19

Kliknij, aby zobaczyć demo
#157

Background: gradient stripes 20

Kliknij, aby zobaczyć demo
#158

Background: gradient stripes 21

Kliknij, aby zobaczyć demo
#159

Background: gradient stripes 22

Kliknij, aby zobaczyć demo
#160

Background: gradient stripes 23

Kliknij, aby zobaczyć demo
#161

Modal (fade)

Kliknij, aby zobaczyć demo
#162

Accordion

Kliknij, aby zobaczyć demo
#163

Tabs

Kliknij, aby zobaczyć demo
#164

Tooltip

Kliknij, aby zobaczyć demo
#165

Toast

Kliknij, aby zobaczyć demo
#166

Dropdown

Kliknij, aby zobaczyć demo
#167

Lightbox

Kliknij, aby zobaczyć demo
#168

Back to top

Kliknij, aby zobaczyć demo
#169

Copy to clipboard

Kliknij, aby zobaczyć demo
#170

Rating stars

Kliknij, aby zobaczyć demo
#171

Progress steps

Kliknij, aby zobaczyć demo
#172

Scroll progress bar

Kliknij, aby zobaczyć demo
#173

Search expand

Kliknij, aby zobaczyć demo
#174

Input float label

Kliknij, aby zobaczyć demo
#175

Form validation hint

Kliknij, aby zobaczyć demo
#176

Styled range

Kliknij, aby zobaczyć demo
#177

Toggle switch

Kliknij, aby zobaczyć demo
#178

Tabs underline slider

Kliknij, aby zobaczyć demo
#179

Marquee text

Kliknij, aby zobaczyć demo
#180

Infinite logo slider

Kliknij, aby zobaczyć demo
#181

Image compare (basic)

Kliknij, aby zobaczyć demo
#182

Gallery masonry (CSS)

Kliknij, aby zobaczyć demo
#183

Context menu

Kliknij, aby zobaczyć demo
#184

Circular progress

Kliknij, aby zobaczyć demo
#185

3D cube (CSS)

Kliknij, aby zobaczyć demo
#186

Steps form (mini)

Kliknij, aby zobaczyć demo
#187

Dropdown variant 27

Kliknij, aby zobaczyć demo
#188

Dropdown variant 28

Kliknij, aby zobaczyć demo
#189

Dropdown variant 29

Kliknij, aby zobaczyć demo
#190

Dropdown variant 30

Kliknij, aby zobaczyć demo
#191

Fireworks (canvas)

Kliknij, aby zobaczyć demo
#192

Snow (canvas)

Kliknij, aby zobaczyć demo
#193

Rain (canvas)

Kliknij, aby zobaczyć demo
#194

Matrix rain

Kliknij, aby zobaczyć demo
#195

Infinite image marquee

Kliknij, aby zobaczyć demo
#196

Counter (scroll reveal)

Kliknij, aby zobaczyć demo
#197

Magnetic cards

Kliknij, aby zobaczyć demo
#198

3D perspective text

Kliknij, aby zobaczyć demo
#199

Card fold on hover

Kliknij, aby zobaczyć demo
#200

Wave section separator

Kliknij, aby zobaczyć demo
#201

Sparkles background (CSS)

Kliknij, aby zobaczyć demo
#202

Blob hover morph

Kliknij, aby zobaczyć demo