ANIMATION CSS CODE

SAMPLE TEXT COLOR HIGLIGHT

From H1 to H6 Heading and Paragraph

You may Change the Color Hex Code

TEXT COLOR

Here are standard rainbow-style hex codes:

Red — #FF0000

Orange — #FFA500

Yellow — #FFFF00

Green — #008000

Blue — #0000FF

Indigo — #4B0082

Violet — #8F00FF

Lighter palette version:

Light Red — #FF6B6B

Light Orange — #FFB347

Light Yellow — #FFF799

Light Green — #90EE90

Light Blue — #87CEFA

Light Indigo — #7B68EE

Light Violet — #D8B4FE

Copy Code Snippet Preview
JS Highlight Word Red
JS Highlight-Yellow
JS Highlight-Word-Orange 
.highlight-word-effect-Red h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, P strong {
    background: #e43838;
    border: 2px solid transparent;
    padding: 0.05em 0.2em;
    border-radius: 5px;
    display: inline-block;
}



.highlight-word-effect-Yellow h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, P strong {
    background: #faf089;
    border: 2px solid transparent;
    padding: 0.05em 0.2em;
    border-radius: 5px;
    display: inline-block;
}
.highlight-word-effect-Orange h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, P strong {
    background: #FFA500;
    border: 2px solid transparent;
    padding: 0.05em 0.2em;
    border-radius: 5px;
    display: inline-block;
}

IMAGE Smooth Hover Zoom

Copy Code Snippet Preview
JS Image Hover 
.imagestyle1 {
  transition: 0.6s ease-in-out;
}

.imagestyle1:hover {
  /* currently 1.2 means the image is at 120% of its original size */
  transform: scale(1.2);
  z-index: 10;
  transition: 0.6s;
}

Glowing gradient outside the box

Copy Code Snippet Preview
JS Glowing radiant when cursor 
/* ---- Custom Property for Gradient Angle Animation ---- */
@property --gradient-angle {
    syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---- Custom class for parent element of container ---- */
.glow-gradient-parent {
    z-index: 1;
}

/* ---- Pseudo-element Gradient Effects ---- */
.glow-gradient-child::before,
.glow-gradient-child::after {
    opacity: 0;
  /* Default opacity */
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: conic-gradient(
    from var(--gradient-angle),
    var(--c-1),
    var(--c-2),
    var(--c-3),
    var(--c-2)
  );
    border-radius: inherit;
    animation: rotation-glow 10s linear infinite;
    transition: opacity 1s;
}

.glow-gradient-child::after {
    filter: blur(var(--blur-radius));
  /* Uses global blur radius */
}

/* ---- Hover Effects ---- */
.glow-gradient-child:hover::before,
.glow-gradient-child:hover::after {
    opacity: 1;
  /* Visible on hover */
}

/* ---- animation to Rotate Gradient ---- */
@keyframes rotation-glow {
    0% {
        --gradient-angle: 0deg;
    }

    100% {
        --gradient-angle: 360deg;
    }
}

Glowing gradient outside the box

Change the color on this c-1: c-2, c-3

/* ---- Global Variables ---- */

:root {

--c-1: #fff;

--c-2: #873893;

--c-3: #fff;

--blur-radius: 2rem;

}

glow-gradient-child

glow-gradient-parent

Glowing gradient outside the box

Glowing gradient outside the box

Glowing gradient

Full border on Row color white and Boarder radius 15px

Test

Test

Test

Test

BLUR CARD-CONTAINER

Who's This Perfect For

BUSINESS OWNERS

AGENCIES

CREATORS

INFLUENCERS

COACHES

TRAINERS

YOUTUBERS

SAASPRENEURS

AFFILIATES

Copy Code Snippet Preview
JS Hovered Cards/Non-hovered card-cotainer 
```css id="k2s9dj"
.blur-effect-container .blur-effect-card {
  transition: transform 0.4s, filter 0.4s, opacity 0.4s;
  position: relative;
}

/* Hover Effect for Individual Cards in the Custom Row */
.blur-effect-container .blur-effect-card:hover {
  transform: scale(1.1);
  /* make card 10% bigger (scale by 1.1) */
  z-index: 10;
}

/* Non-Hovered Cards in the Custom Row Blur and Scale Down */
.blur-effect-container:hover .blur-effect-card:not(:hover) {
  filter: blur(10px);
  /* Apply blur to non-hovered cards */
  transform: scale(0.9);
  opacity: 80%;
}
```

LINK TO WATCH-You tube

Add Subtext text. Click "Edit Text" to update the font, size and more.
To change and reuse text themes, go to Site Styles.

Add Subtext text. Click "Edit Text" to update the font, size and more.
To change and reuse text themes, go to Site Styles.

Hover each button

INFORMATION OVERLAOD YEAH CSSS!