An enticing headline with a 
gradient background

CUSTOM CSS EXAMPLE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Visit our Virtual Space

July 2025 – Updated

See our Portfolio

CSS Classes and code

gradient-text

glow-text

typing-text

rainbow-hover

three-d-text

wavy-text

outline-text

neon-flicker

SCROLL-BASED TEXT EFFECTS

scroll-fade (Fade-in on Scroll) needs JS in footer (alt AOS plugin class: aos-fade-up )

slide-in-left (Slide-in from Left)

RESPONSIVE TEXT STYLES

responsive-text (Fluid Font Size)

media-responsive (Responsive Font with Media Queries)

TEXT BUTTON EFFECTS

shine-button (Button with Text Shine on Hover)

glow-button (Glow Button with Text Pulse)

underline-sweep (Underline Sweep on Hover)

IMAGE EFFECTS

img-zoom (Hover Zoom Effect)

img-grayscale (Grayscale on Hover)

underline-sweep (Underline Sweep on Hover)

img-overlay (Color Overlay)

img-glow (Image Glow on Hover)

img-blur (Blur on Hover)

img-rounded-shadow (Rounded with Shadow)

img-sepia (Sepia Effect)

img-bright (Brightness)

img-dark (Darkness)

img-contrast (Contrast)

HOVER & TRANSFORM EFFECTS

img-flip (Flip on Hover)

img-rotate (Rotate on Hover)

img-skew (Skew on Hover)

ANIMATED/TRANSITION EFFECTS

img-pulse (Pulse Animation)

img-fadein (Fade In on Load)

BORDERS, FRAMES & SHADOWS

img-border-hover (Border on Hover)

img-drop-shadow (Drop Shadow)

GRADIENT OVERLAY HOVER EFFECT

img-gradient-hover

/* Gradient Text */
.gradient-text {
background: linear-gradient(45deg, #ff6ec4, #7873f5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Glow Text */
.glow-text {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}
/* 3D Text Shadow */
.text-3d {
color: #fff;
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa;
}
/* Outlined Text */
.outline-text {
color: transparent;
-webkit-text-stroke: 1px #333;
}
/* Rainbow Hover Text */
.rainbow-hover {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 0.6s ease;
}
.rainbow-hover:hover {
background-position: right;
}
/* Typing Animation / .typing-text { font-family: monospace; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid; animation: typing 4s steps(30, end) forwards, blink 0.7s step-end infinite; } @keyframes typing { to { width: 100%; } } @keyframes blink { 50% { border-color: transparent; } } / Fluid Font Size */
.responsive-text {
font-size: clamp(1rem, 4vw, 3rem);
}
/* Media Query Font Sizes / .media-responsive { font-size: 18px; } @media (min-width: 768px) { .media-responsive { font-size: 24px; } } @media (min-width: 1200px) { .media-responsive { font-size: 32px; } } / Fade In */
.scroll-fade {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.scroll-fade.visible {
opacity: 1;
transform: translateY(0);
}
/* Slide In Left / .slide-in-left { opacity: 0; transform: translateX(-60px); transition: all 0.7s ease-out; } .slide-in-left.visible { opacity: 1; transform: translateX(0); } / Glowing Button */
.glow-button {
background-color: #111;
color: #0f0;
padding: 10px 20px;
border: none;
border-radius: 6px;
box-shadow: 0 0 10px #0f0;
text-shadow: 0 0 5px #0f0;
animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
from { box-shadow: 0 0 10px #0f0; }
to { box-shadow: 0 0 25px #0f0; }
}
/* Shine Hover Button */
.shine-button {
position: relative;
display: inline-block;
color: #fff;
background: #333;
padding: 12px 24px;
overflow: hidden;
border-radius: 4px;
transition: background 0.3s;
}
.shine-button::before {
content: ”;
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
transform: skewX(-20deg);
}
.shine-button:hover::before {
left: 125%;
transition: left 0.75s;
}
/* Underline Hover Effect */
.underline-hover {
position: relative;
display: inline-block;
color: #000;
text-decoration: none;
}
.underline-hover::after {
content: ”;
position: absolute;
width: 100%;
height: 2px;
left: 0;
bottom: 0;
background-color: #ff4081;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
.underline-hover:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.img-zoom {
  transition: transform 0.3s ease;
}
.img-zoom:hover {
  transform: scale(1.1);
}
.img-grayscale {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.img-grayscale:hover {
  filter: grayscale(0%);
}
.img-overlay {
  position: relative;
  overflow: hidden;
}
.img-overlay::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}
.img-overlay:hover::after {
  background: rgba(0, 0, 0, 0.1);
}
.img-glow {
  transition: box-shadow 0.3s ease;
}
.img-glow:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.img-blur {
  transition: filter 0.3s ease;
}
.img-blur:hover {
  filter: blur(2px);
}
.img-rounded-shadow {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.img-sepia {
  filter: sepia(100%);
}
.img-bright {
  filter: brightness(1.4);
}
.img-dark {
  filter: brightness(0.6);
}
.img-contrast {
  filter: contrast(150%);
}
.img-flip {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.img-flip:hover {
  transform: rotateY(180deg);
}
.img-rotate {
  transition: transform 0.4s ease;
}
.img-rotate:hover {
  transform: rotate(10deg);
}
.img-skew {
  transition: transform 0.4s ease;
}
.img-skew:hover {
  transform: skewX(10deg);
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.img-pulse {
  animation: pulse 2s infinite;
}
.img-fadein {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
.img-border-hover {
  transition: border 0.3s ease;
}
.img-border-hover:hover {
  border: 4px solid #007BFF;
}
.img-drop-shadow {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}
.img-gradient-hover {
  position: relative;
  overflow: hidden;
}
.img-gradient-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.img-gradient-hover:hover::after {
  opacity: 1;
}
.img-card {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  border-radius: 12px;
}

.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}