CSS
CSS style snippets with live preview support
Glassmorphism Card
Modern glass-effect card component using backdrop-filter for stunning UI design
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
...Neon Glow Button
Eye-catching neon glow button with hover animation effects
.neon-button {
padding: 12px 32px;
font-size: 18px;
...3D Text Effect
Stunning 3D text with layered shadows and perspective
.text-3d {
font-size: 72px;
font-weight: 900;
...Gradient Border Card
Card with beautiful gradient border using CSS pseudo-elements
.gradient-border-card {
position: relative;
width: 300px;
...Pulse Animation Effect
Smooth pulse animation for UI elements like notifications or buttons
.pulse-effect {
width: 60px;
height: 60px;
...Fluid Wave Animation
Smooth fluid wave animation using CSS keyframes and transforms
.fluid-wave {
width: 300px;
height: 150px;
...Skew Transform Card
Stylish skew transform card with hover effect and perspective
.skew-card {
width: 300px;
height: 200px;
...Grid Item Hover Effect
Elegant grid item hover effect with scale and shadow transition
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
...Animated Loading Spinner
Smooth rotating loading spinner with gradient border
.spinner {
width: 50px;
height: 50px;
...Gradient Text Effect
Vibrant gradient text with background clip and text fill
.text-gradient {
font-size: 48px;
font-weight: 800;
...Scroll Progress Indicator
Dynamic scroll progress bar at the top of the page
/* Add JS: window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("scrollIndicator").style.width = scrolled + "%"; } */
.scroll-indicator {
position: fixed;
...Custom Toggle Switch
Stylish custom toggle switch replacement for checkbox
.toggle-switch {
position: relative;
display: inline-block;
...Parallax Hover Card
3D parallax effect on card hover with mouse movement tracking
/* Add JS: document.querySelector('.parallax-card').addEventListener('mousemove', function(e) { const x = (e.clientX - this.offsetLeft - this.offsetWidth/2) / 20; const y = (e.clientY - this.offsetTop - this.offsetHeight/2) / 20; this.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`; }); document.querySelector('.parallax-card').addEventListener('mouseleave', function() { this.style.transform = 'rotateY(0) rotateX(0)'; }); */
.parallax-card {
width: 300px;
...Bounce Animation Effect
Playful bounce animation for UI elements on interaction
.bounce-effect {
width: 80px;
height: 80px;
...Blur Hover Effect
Smooth blur to clear transition on card hover
.blur-card {
width: 300px;
height: 200px;
...CSS Ribbon Badge
Stylish ribbon badge with angled corners and shadow effect
.ribbon {
position: relative;
background: #ff4757;
...Typewriter Animation
Realistic typewriter text animation with cursor blinking
.typewriter {
font-size: 24px;
font-family: monospace;
...Rainbow Loading Bar
Colorful rainbow loading bar with smooth animation
.rainbow-loader {
height: 8px;
width: 100%;
...3D Rotating Cube
Animated 3D cube with perspective and transform effects
.cube-container {
width: 200px;
height: 200px;
...Shimmer Loading Effect
Smooth shimmer effect for skeleton loading screens
.shimmer-container {
width: 300px;
height: 200px;
...Animated Underline
Elegant animated underline effect on text hover
.animated-underline {
font-size: 24px;
font-weight: 600;
...Bubble Animation
Floating bubble animation for background decoration
.bubble-container {
width: 400px;
height: 300px;
...Glitch Text Effect
Retro glitch text effect with animated distortion
.glitch-text {
font-size: 48px;
font-weight: 900;
...Scroll Snap Container
Smooth scroll snap effect for horizontal/vertical scrolling
.scroll-snap-container {
width: 100%;
max-width: 600px;
...Animated CSS Tooltip
Stylish animated tooltip with arrow and fade effect
.tooltip-container {
position: relative;
display: inline-block;
...CSS Fire Animation
Realistic fire animation effect using gradient and keyframes
.fire-container {
width: 100px;
height: 200px;
...Animated Sticky Header
Sticky header with shrink animation on scroll
/* Add JS: window.addEventListener('scroll', function() { const header = document.querySelector('.sticky-header'); if (window.scrollY > 50) { header.classList.add('shrink'); } else { header.classList.remove('shrink'); } }); */
.sticky-header {
position: fixed;
...Animated Gradient Button
Button with animated gradient background on hover
.gradient-button {
padding: 12px 32px;
border: none;
...Water Wave Animation
Realistic water wave animation using CSS transforms
.water-container {
width: 300px;
height: 200px;
...Custom Star Rating
Stylish custom star rating component with hover effects
.star-rating {
display: inline-block;
font-size: 0;
...Liquid Morph Button
Ultra-smooth liquid morphing button with bezier curve animations and blob effects
.liquid-button {
position: relative;
width: 200px;
...Holographic Card
Next-gen holographic card with iridescent sheen and 3D tilt effect
/* Add JS: document.querySelector('.hologram-card').addEventListener('mousemove', (e) => { const rect = e.target.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; e.target.style.transform = `perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`; }); */
.hologram-card {
width: 350px;
...Advanced Glitch Art
Cinema-quality glitch effect with color separation and scanline overlay
.glitch-art-container {
position: relative;
width: 400px;
...Liquid Metal Text
Hyper-realistic liquid metal text with flowing chrome effect
.liquid-metal-text {
font-size: 80px;
font-weight: 900;
...Orbital Particle Animation
3D orbital particle system with nested rotations and glow effects
.orbital-container {
width: 300px;
height: 300px;
...3D Tunnel Animation
Immersive 3D tunnel with infinite scrolling perspective effect
.tunnel-container {
width: 400px;
height: 400px;
...Photorealistic Bloom Effect
Advanced bloom/glow effect with multiple blur layers and color grading
.bloom-container {
width: 300px;
height: 300px;
...CSS Cloth Simulation
Physics-based cloth simulation effect with wave animations
.cloth-container {
width: 400px;
height: 300px;
...Animated Neon Grid
Cyberpunk-style neon grid with scanning laser and pulse effects
.neon-grid-container {
width: 400px;
height: 400px;
...Volumetric Light Rays
Cinema-quality godrays/volumetric light effect with depth
.volumetric-container {
width: 400px;
height: 300px;
...Plasma Energy Animation
Dynamic plasma energy effect with swirling color gradients and high contrast
.plasma-container {
width: 400px;
height: 300px;
...Neon Text Reveal Animation
High-contrast neon text reveal with sliding mask effect
.neon-reveal-container {
position: relative;
width: 100%;
...3D Glass Cube with Reflection
High-contrast 3D glass cube with reflective surfaces and shadow
.cube-3d-container {
width: 300px;
height: 300px;
...Pixel Explosion Animation
High-contrast pixel explosion effect with vibrant colors on dark background
.pixel-explosion-container {
width: 400px;
height: 300px;
...Highlight Border Animation
High-contrast animated border with glowing highlight effect
.highlight-card {
width: 350px;
height: 200px;
...High Contrast Bounce Grid
Vibrant bouncing shapes on high-contrast background with sync animation
.bounce-grid-container {
width: 400px;
height: 300px;
...Glowing Particles on Dark Background
High-contrast glowing particles with trailing light effects
.particles-container {
width: 400px;
height: 300px;
...Extreme Contrast Text Shadow
Ultra-bold text with high-contrast multi-layer shadow effect
.contrast-text {
font-size: 72px;
font-weight: 900;
...Animated Gradient Border Card
High-contrast card with animated gradient border on neutral background
.gradient-border-card-contrast {
width: 350px;
height: 220px;
...High Contrast Dark Mode Toggle
Ultra high-contrast dark/light mode toggle with smooth animation
.contrast-toggle-container {
width: 80px;
height: 40px;
...