Galeria: 300 efektów UI

Do góry

Kliknij kartę, aby zobaczyć efekt

Użyj filtrów: scroll, hover, image, ui, background, loader, misc.

#001

Reveal: fade-in

scroll
#002

Reveal: slide-up

scroll
#003

Reveal: slide-down

scroll
#004

Reveal: slide-left

scroll
#005

Reveal: slide-right

scroll
#006

Reveal: zoom-in

scroll
#007

Reveal: zoom-out

scroll
#008

Reveal: rotate-in-z

scroll
#009

Reveal: rotate-in-x

scroll
#010

Reveal: rotate-in-y

scroll
#011

Reveal: blur-in

scroll
#012

Reveal: skew-x

scroll
#013

Reveal: skew-y

scroll
#014

Reveal: clip-vertical

scroll
#015

Reveal: clip-horizontal

scroll
#016

Reveal: flip-in-x

scroll
#017

Reveal: flip-in-y

scroll
#018

Reveal: long distance

scroll
#019

Reveal: scale+rotate

scroll
#020

Reveal: slide-zoom

scroll
#021

Reveal: fade fast

scroll
#022

Reveal: fade slow

scroll
#023

Reveal: pop-in

scroll
#024

Reveal: drop-in

scroll
#025

Reveal: rise-in

scroll
#026

Reveal: blur+scale

scroll
#027

Reveal: overshoot

scroll
#028

Reveal: rotate small

scroll
#029

Reveal: perspective y

scroll
#030

Reveal: perspective x

scroll
#031

Reveal: left long

scroll
#032

Reveal: right long

scroll
#033

Reveal: bounce in

scroll
#034

Reveal: elastic

scroll
#035

Reveal: mask circle

scroll
#036

Reveal: mask diamond

scroll
#037

Reveal: underline grow

scroll
#038

Reveal: stagger list

scroll
#039

Reveal: columns

scroll
#040

Reveal: cards grid

scroll
#041

Hover: glow neon

hover
#042

Hover: jelly

hover
#043

Hover: shake

hover
#044

Hover: bounce

hover
#045

Hover: pulse outline

hover
#046

Hover: gradient text

hover
#047

Hover: border grow

hover
#048

Hover: long shadow

hover
#049

Hover: inner shadow

hover
#050

Hover: tilt 3D

hover
#051

Hover: shine

hover
#052

Hover: scale 1.06

hover
#053

Hover: scale 1.07

hover
#054

Hover: scale 1.08

hover
#055

Hover: scale 1.09

hover
#056

Hover: scale 1.02

hover
#057

Hover: scale 1.03

hover
#058

Hover: scale 1.04

hover
#059

Hover: scale 1.05

hover
#060

Hover: scale 1.06

hover
#061

Hover: scale 1.07

hover
#062

Hover: scale 1.08

hover
#063

Hover: scale 1.09

hover
#064

Hover: scale 1.02

hover
#065

Hover: scale 1.03

hover
#066

Hover: scale 1.04

hover
#067

Hover: scale 1.05

hover
#068

Hover: scale 1.06

hover
#069

Hover: scale 1.07

hover
#070

Hover: scale 1.08

hover
#071

Hover: scale 1.09

hover
#072

Hover: scale 1.02

hover
#073

Hover: scale 1.03

hover
#074

Hover: scale 1.04

hover
#075

Hover: scale 1.05

hover
#076

Hover: scale 1.06

hover
#077

Hover: scale 1.07

hover
#078

Hover: scale 1.08

hover
#079

Hover: scale 1.09

hover
#080

Hover: scale 1.02

hover
#081

Hover: scale 1.03

hover
#082

Hover: scale 1.04

hover
#083

Hover: scale 1.05

hover
#084

Hover: scale 1.06

hover
#085

Hover: scale 1.07

hover
#086

Hover: scale 1.08

hover
#087

Hover: scale 1.09

hover
#088

Hover: scale 1.02

hover
#089

Hover: scale 1.03

hover
#090

Hover: scale 1.04

hover
#091

Hover: scale 1.05

hover
#092

Hover: scale 1.06

hover
#093

Hover: scale 1.07

hover
#094

Hover: scale 1.08

hover
#095

Hover: scale 1.09

hover
#096

Hover: scale 1.02

hover
#097

Hover: scale 1.03

hover
#098

Hover: scale 1.04

hover
#099

Hover: scale 1.05

hover
#100

Hover: scale 1.06

hover
#101

Loader: ring spin

loader
#102

Loader: dual ring

loader
#103

Loader: dots 3 bounce

loader
#104

Loader: bars wave

loader
#105

Loader: square flip

loader
#106

Loader: ripple circles

loader
#107

Loader: dot pulse 1

loader
#108

Loader: dot pulse 2

loader
#109

Loader: dot pulse 3

loader
#110

Loader: dot pulse 4

loader
#111

Loader: dot pulse 5

loader
#112

Loader: dot pulse 6

loader
#113

Loader: dot pulse 7

loader
#114

Loader: dot pulse 8

loader
#115

Loader: dot pulse 9

loader
#116

Loader: dot pulse 10

loader
#117

Loader: dot pulse 11

loader
#118

Loader: dot pulse 12

loader
#119

Loader: dot pulse 13

loader
#120

Loader: dot pulse 14

loader
#121

Loader: dot pulse 15

loader
#122

Loader: dot pulse 16

loader
#123

Loader: dot pulse 17

loader
#124

Loader: dot pulse 18

loader
#125

Loader: dot pulse 19

loader
#126

Loader: dot pulse 20

loader
#127

Loader: dot pulse 21

loader
#128

Loader: dot pulse 22

loader
#129

Loader: dot pulse 23

loader
#130

Background: animated gradient

background
#131

Background: diagonal stripes

background
#132

Background: waves (SVG)

background
#133

Modal (fade)

ui
#134

Lightbox

ui
#135

Back to top

ui
#136

Background: pattern 136

background
#137

Background: pattern 137

background
#138

Background: pattern 138

background
#139

Background: pattern 139

background
#140

Background: pattern 140

background
#141

Background: pattern 141

background
#142

Background: pattern 142

background
#143

Background: pattern 143

background
#144

Background: pattern 144

background
#145

Background: pattern 145

background
#146

Background: pattern 146

background
#147

Background: pattern 147

background
#148

Background: pattern 148

background
#149

Background: pattern 149

background
#150

Background: pattern 150

background
#151

Background: pattern 151

background
#152

Background: pattern 152

background
#153

Background: pattern 153

background
#154

Background: pattern 154

background
#155

Background: pattern 155

background
#156

Background: pattern 156

background
#157

Background: pattern 157

background
#158

Background: pattern 158

background
#159

Background: pattern 159

background
#160

Background: pattern 160

background
#161

Background: pattern 161

background
#162

Background: pattern 162

background
#163

Background: pattern 163

background
#164

Background: pattern 164

background
#165

Background: pattern 165

background
#166

Background: pattern 166

background
#167

Background: pattern 167

background
#168

Background: pattern 168

background
#169

Background: pattern 169

background
#170

Background: pattern 170

background
#171

Background: pattern 171

background
#172

Background: pattern 172

background
#173

Background: pattern 173

background
#174

Background: pattern 174

background
#175

Background: pattern 175

background
#176

Background: pattern 176

background
#177

Background: pattern 177

background
#178

Background: pattern 178

background
#179

Background: pattern 179

background
#180

Background: pattern 180

background
#181

Background: pattern 181

background
#182

Background: pattern 182

background
#183

Background: pattern 183

background
#184

Background: pattern 184

background
#185

Background: pattern 185

background
#186

Background: pattern 186

background
#187

Background: pattern 187

background
#188

Background: pattern 188

background
#189

Background: pattern 189

background
#190

Background: pattern 190

background
#191

Background: pattern 191

background
#192

Background: pattern 192

background
#193

Background: pattern 193

background
#194

Background: pattern 194

background
#195

Background: pattern 195

background
#196

Background: pattern 196

background
#197

Background: pattern 197

background
#198

Background: pattern 198

background
#199

Background: pattern 199

background
#200

Background: pattern 200

background
#201

Image: hover zoom x1

image
#202

Image: hover zoom x2

image
#203

Image: hover zoom x3

image
#204

Image: hover zoom x4

image
#205

Image: pan LR x1

image
#206

Image: pan LR x2

image
#207

Image: pan LR x3

image
#208

Image: pan LR x4

image
#209

Image: pan UD x1

image
#210

Image: pan UD x2

image
#211

Image: pan UD x3

image
#212

Image: pan UD x4

image
#213

Image: gradient overlay x1

image
#214

Image: gradient overlay x2

image
#215

Image: gradient overlay x3

image
#216

Image: gradient overlay x4

image
#217

Image: caption slide x1

image
#218

Image: caption slide x2

image
#219

Image: caption slide x3

image
#220

Image: caption slide x4

image
#221

Image: crossfade mask x1

image
#222

Image: crossfade mask x2

image
#223

Image: crossfade mask x3

image
#224

Image: crossfade mask x4

image
#225

Image: grayscale→color x1

image
#226

Image: grayscale→color x2

image
#227

Image: grayscale→color x3

image
#228

Image: grayscale→color x4

image
#229

Image: blur→sharp x1

image
#230

Image: blur→sharp x2

image
#231

Image: blur→sharp x3

image
#232

Image: blur→sharp x4

image
#233

Image: bright+contrast x1

image
#234

Image: bright+contrast x2

image
#235

Image: bright+contrast x3

image
#236

Image: bright+contrast x4

image
#237

Image: sepia tone x1

image
#238

Image: sepia tone x2

image
#239

Image: sepia tone x3

image
#240

Image: sepia tone x4

image
#241

Image: hue-rotate 30°

image
#242

Image: hue-rotate 60°

image
#243

Image: hue-rotate 90°

image
#244

Image: hue-rotate 120°

image
#245

Image: duotone overlay x1

image
#246

Image: duotone overlay x2

image
#247

Image: duotone overlay x3

image
#248

Image: duotone overlay x4

image
#249

Image: chromatic aberration x1

image
#250

Image: chromatic aberration x2

image
#251

Image: chromatic aberration x3

image
#252

Image: chromatic aberration x4

image
#253

Image: tilt 3D x1

image
#254

Image: tilt 3D x2

image
#255

Image: tilt 3D x3

image
#256

Image: tilt 3D x4

image
#257

Image: parallax mouse x1

image
#258

Image: parallax mouse x2

image
#259

Image: parallax mouse x3

image
#260

Image: parallax mouse x4

image
#261

Image: Ken Burns x1

image
#262

Image: Ken Burns x2

image
#263

Image: Ken Burns x3

image
#264

Image: Ken Burns x4

image
#265

Image: polaroid hover x1

image
#266

Image: polaroid hover x2

image
#267

Image: polaroid hover x3

image
#268

Image: polaroid hover x4

image
#269

Image: blur reveal text x1

image
#270

Image: blur reveal text x2

image
#271

Image: blur reveal text x3

image
#272

Image: blur reveal text x4

image
#273

Image: circle mask overlay x1

image
#274

Image: circle mask overlay x2

image
#275

Image: circle mask overlay x3

image
#276

Image: circle mask overlay x4

image
#277

Image: border reveal x1

image
#278

Image: border reveal x2

image
#279

Image: border reveal x3

image
#280

Image: border reveal x4

image
#281

Image: before/after slider x1

image
#282

Image: before/after slider x2

image
#283

Image: before/after slider x3

image
#284

Image: before/after slider x4

image
#285

Image: glitch x1

image
#286

Image: glitch x2

image
#287

Image: glitch x3

image
#288

Image: glitch x4

image
#289

Image: pixelated zoom x1

image
#290

Image: pixelated zoom x2

image
#291

Image: pixelated zoom x3

image
#292

Image: pixelated zoom x4

image
#293

Image: top gradient fade x1

image
#294

Image: top gradient fade x2

image
#295

Image: top gradient fade x3

image
#296

Image: top gradient fade x4

image
#297

Image: round corners zoom x1

image
#298

Image: round corners zoom x2

image
#299

Image: round corners zoom x3

image
#300

Image: round corners zoom x4

image
#301

Image: badge reveal x1

image
#302

Image: badge reveal x2

image
#303

Image: badge reveal x3

image
#304

Image: badge reveal x4

image
#305

Image: lens flare x1

image
#306

Image: lens flare x2

image
#307

Image: lens flare x3

image
#308

Image: lens flare x4

image
#309

Image: slide-up caption x1

image
#310

Image: slide-up caption x2

image
#311

Image: slide-up caption x3

image
#312

Image: slide-up caption x4

image