01CSS↗
Neon Glow Text Effect
Create eye-catching neon glow text using CSS text-shadow with multiple layers.
.neon-text {
color: #fff;
text-shadow:
0 0 5px #fff,#neon#glow
easyFind your
next move.
17 useful things
02CSS↗
Animated Gradient Background
Create a smoothly animating gradient background that shifts colors continuously.
.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;#gradient#animation
easy03CSS↗
Hover Card Lift Effect
Create an elegant card that lifts and shows a shadow on hover.
.lift-card {
background: #1a1a2e;
border-radius: 12px;
padding: 24px;#hover#card
easy04CSS↗
Smooth Scroll Behavior
Enable smooth scrolling for anchor links and scroll actions.
/* Enable smooth scrolling globally */
html {
scroll-behavior: smooth;
}#scroll#smooth
easy05CSS↗
Button Hover Effects Collection
Modern button hover effects with smooth transitions.
/* Glow effect */
.btn-glow {
background: linear-gradient(135deg, #3a7bff, #8b5cf6);
color: white;#button#hover
medium06CSS↗
Skeleton Loading Animation
Create skeleton screens for content loading states.
.skeleton {
background: linear-gradient(
90deg,
#1a1a2e 25%,#skeleton#loading
medium07CSS↗
Animated Underline on Hover
Create an animated underline effect for links and navigation items.
/* Slide from left */
.underline-left {
position: relative;
text-decoration: none;#underline#hover
easy08CSS↗
3D Card Flip Animation
Create a card that flips to reveal content on the back.
.flip-card {
perspective: 1000px;
width: 300px;
height: 400px;#3d#flip
medium09CSS↗
Animated Hamburger Menu Icon
CSS-only animated hamburger icon that transforms to X on click.
.hamburger {
width: 30px;
height: 24px;
position: relative;#hamburger#menu
medium10CSS↗
Typewriter Text Effect
Create a typing animation effect for text using CSS.
.typewriter {
font-family: monospace;
overflow: hidden;
border-right: 3px solid #3a7bff;#typing#animation
medium11CSS↗
Pulse and Ping Animations
Create attention-grabbing pulse effects for notifications and buttons.
/* Simple pulse */
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}#pulse#animation
easy12CSS↗
Animated Progress Bar
Create stylish progress bars with animations and gradient effects.
.progress-container {
width: 100%;
height: 8px;
background: #1a1a2e;#progress#bar
easy