# king-addons/51.1.83/includes/features/Animated_Gradient_Mesh_Background/style.css

King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder, version 51.1.83. 343 lines.

- Page: https://pluginprobe.com/plugins/king-addons/51.1.83/code/includes/features/Animated_Gradient_Mesh_Background/style.css
- Raw: https://pluginprobe.com/plugins/king-addons/51.1.83/raw/includes/features/Animated_Gradient_Mesh_Background/style.css
- Modified: 2026-09-16T13:52:08+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/king-addons/51.1.83/code/includes/features/Animated_Gradient_Mesh_Background/style.css#L10-L20`.

```css
/* Animated Gradient / Mesh Background Feature */

.kng-agm-bg-yes {
    position: relative;
    --kng-agm-speed: 40;
    --kng-agm-opacity: 1;
    --kng-agm-blur: 0px;
    --kng-agm-noise-opacity: 0.18;
    --kng-agm-blend-mode: normal;
    --kng-agm-easing: ease-in-out;
    --kng-agm-angle: 135deg;
    --kng-agm-bg-size: 200%;
    --kng-agm-base: #0b1020;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0b1020 0%, #1c3c68 45%, #3dd6d0 100%);
    --kng-agm-mesh: radial-gradient(circle at 15% 20%, rgba(61, 214, 208, 0.65) 0%, rgba(61, 214, 208, 0) 55%),
        radial-gradient(circle at 80% 25%, rgba(88, 120, 255, 0.6) 0%, rgba(88, 120, 255, 0) 55%),
        radial-gradient(circle at 45% 85%, rgba(8, 14, 30, 0.9) 0%, rgba(8, 14, 30, 0) 60%);
    --kng-agm-image: var(--kng-agm-gradient);
}

.kng-agm-type-mesh {
    --kng-agm-image: var(--kng-agm-mesh);
}

.kng-agm-direction-left-right {
    --kng-agm-from: 0% 50%;
    --kng-agm-to: 100% 50%;
}

.kng-agm-direction-right-left {
    --kng-agm-from: 100% 50%;
    --kng-agm-to: 0% 50%;
}

.kng-agm-direction-top-bottom {
    --kng-agm-from: 50% 0%;
    --kng-agm-to: 50% 100%;
}

.kng-agm-direction-bottom-top {
    --kng-agm-from: 50% 100%;
    --kng-agm-to: 50% 0%;
}

.kng-agm-direction-diag-lr {
    --kng-agm-from: 0% 0%;
    --kng-agm-to: 100% 100%;
}

.kng-agm-direction-diag-rl {
    --kng-agm-from: 100% 0%;
    --kng-agm-to: 0% 100%;
}

.kng-agm-bg-yes:not(.elementor-column)::before,
.kng-agm-bg-yes:not(.elementor-column)::after,
.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before,
.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.kng-agm-bg-yes:not(.elementor-column)::before,
.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before {
    background-color: var(--kng-agm-base);
    background-image: var(--kng-agm-image);
    background-size: var(--kng-agm-bg-size) var(--kng-agm-bg-size);
    background-position: var(--kng-agm-from, 0% 50%);
    opacity: var(--kng-agm-opacity);
    filter: blur(var(--kng-agm-blur));
    mix-blend-mode: var(--kng-agm-blend-mode);
    animation: none;
}

.kng-agm-bg-yes.kng-agm-animate-yes:not(.elementor-column)::before,
.elementor-column.kng-agm-bg-yes.kng-agm-animate-yes > .elementor-widget-wrap::before {
    animation: kng-agm-shift calc(400s / var(--kng-agm-speed, 40)) var(--kng-agm-easing) infinite;
}

.kng-agm-bg-yes.kng-agm-scroll-sync:not(.elementor-column)::before,
.elementor-column.kng-agm-bg-yes.kng-agm-scroll-sync > .elementor-widget-wrap::before {
    background-position: var(--kng-agm-scroll-x, 0%) var(--kng-agm-scroll-y, 50%);
    animation: none;
}

.kng-agm-bg-yes:not(.elementor-column)::after,
.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::after {
    opacity: 0;
    mix-blend-mode: soft-light;
}

/* Noise Type: Grain (default) */
.kng-agm-noise-yes.kng-agm-noise-type-grain:not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes.kng-agm-noise-type-grain > .elementor-widget-wrap::after,
.kng-agm-noise-yes:not([class*="kng-agm-noise-type-"]):not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes:not([class*="kng-agm-noise-type-"]) > .elementor-widget-wrap::after {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 4px);
    opacity: var(--kng-agm-noise-opacity);
}

/* Noise Type: Lines */
.kng-agm-noise-yes.kng-agm-noise-type-lines:not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes.kng-agm-noise-type-lines > .elementor-widget-wrap::after {
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.1) 0px,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: var(--kng-agm-noise-opacity);
}

/* Noise Type: Dots */
.kng-agm-noise-yes.kng-agm-noise-type-dots:not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes.kng-agm-noise-type-dots > .elementor-widget-wrap::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: var(--kng-agm-noise-opacity);
}

/* Noise Type: Crosshatch */
.kng-agm-noise-yes.kng-agm-noise-type-crosshatch:not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes.kng-agm-noise-type-crosshatch > .elementor-widget-wrap::after {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 5px);
    opacity: var(--kng-agm-noise-opacity);
}

.kng-agm-noise-yes:not(.elementor-column)::after,
.elementor-column.kng-agm-noise-yes > .elementor-widget-wrap::after {
    opacity: var(--kng-agm-noise-opacity);
}

.kng-agm-bg-yes > .elementor-container,
.kng-agm-bg-yes > .e-con-inner {
    position: relative;
    z-index: 1;
}

.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap {
    position: relative;
    z-index: 0;
}

.elementor-column.kng-agm-bg-yes > .elementor-widget-wrap > .elementor-element {
    position: relative;
    z-index: 1;
}

.kng-agm-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background-size: 200% 200%;
    background-position: 0% 50%;
    animation: kng-agm-shift 24s ease-in-out infinite;
}

.kng-agm-layer.is-static {
    animation: none;
}

.kng-agm-export {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    padding: 10px;
    border-radius: 10px;
    background: rgba(15, 17, 22, 0.85);
    color: #f2f2f2;
    width: 220px;
    font-size: 12px;
}

.kng-agm-export button {
    width: 100%;
    border: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ffffff;
    color: #0f1116;
    cursor: pointer;
    font-weight: 600;
}

.kng-agm-export textarea {
    margin-top: 6px;
    width: 100%;
    height: 80px;
    resize: none;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #e9e9e9;
    font-size: 11px;
}

@keyframes kng-agm-shift {
    0% {
        background-position: var(--kng-agm-from, 0% 50%);
    }
    100% {
        background-position: var(--kng-agm-to, 100% 50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kng-agm-bg-yes:not(.elementor-column)::before,
    .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before,
    .kng-agm-layer {
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    .kng-agm-disable-tablet-yes:not(.elementor-column)::before,
    .kng-agm-disable-tablet-yes:not(.elementor-column)::after,
    .elementor-column.kng-agm-disable-tablet-yes > .elementor-widget-wrap::before,
    .elementor-column.kng-agm-disable-tablet-yes > .elementor-widget-wrap::after {
        opacity: 0;
    }
}

@media (max-width: 767px) {
    .kng-agm-disable-mobile-yes:not(.elementor-column)::before,
    .kng-agm-disable-mobile-yes:not(.elementor-column)::after,
    .elementor-column.kng-agm-disable-mobile-yes > .elementor-widget-wrap::before,
    .elementor-column.kng-agm-disable-mobile-yes > .elementor-widget-wrap::after {
        opacity: 0;
    }

    .kng-agm-adaptive-yes {
        --kng-agm-speed: 28;
        --kng-agm-noise-opacity: 0.1;
        --kng-agm-blur: 0px;
    }
}

.kng-agm-preset-aurora {
    --kng-agm-base: #0b1020;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0b1020 0%, #1c3c68 45%, #3dd6d0 100%);
    --kng-agm-mesh: radial-gradient(circle at 15% 20%, rgba(61, 214, 208, 0.65) 0%, rgba(61, 214, 208, 0) 55%),
        radial-gradient(circle at 80% 25%, rgba(88, 120, 255, 0.6) 0%, rgba(88, 120, 255, 0) 55%),
        radial-gradient(circle at 45% 85%, rgba(8, 14, 30, 0.9) 0%, rgba(8, 14, 30, 0) 60%);
}

.kng-agm-preset-sunset {
    --kng-agm-base: #1d0c08;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #2c0f09 0%, #ff7a59 45%, #ffd082 100%);
    --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(255, 122, 89, 0.65) 0%, rgba(255, 122, 89, 0) 60%),
        radial-gradient(circle at 80% 30%, rgba(255, 208, 130, 0.6) 0%, rgba(255, 208, 130, 0) 60%),
        radial-gradient(circle at 50% 80%, rgba(55, 15, 8, 0.85) 0%, rgba(55, 15, 8, 0) 60%);
}

.kng-agm-preset-ocean {
    --kng-agm-base: #061a2e;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #061a2e 0%, #0d5c7f 45%, #39d2c0 100%);
    --kng-agm-mesh: radial-gradient(circle at 18% 30%, rgba(57, 210, 192, 0.6) 0%, rgba(57, 210, 192, 0) 60%),
        radial-gradient(circle at 80% 20%, rgba(13, 92, 127, 0.7) 0%, rgba(13, 92, 127, 0) 60%),
        radial-gradient(circle at 50% 85%, rgba(5, 16, 34, 0.9) 0%, rgba(5, 16, 34, 0) 60%);
}

.kng-agm-preset-violet-mist {
    --kng-agm-base: #190c2d;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #1c0d33 0%, #7a3bff 45%, #f4b9ff 100%);
    --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(244, 185, 255, 0.6) 0%, rgba(244, 185, 255, 0) 60%),
        radial-gradient(circle at 80% 30%, rgba(122, 59, 255, 0.6) 0%, rgba(122, 59, 255, 0) 60%),
        radial-gradient(circle at 45% 80%, rgba(20, 8, 40, 0.9) 0%, rgba(20, 8, 40, 0) 60%);
}

.kng-agm-preset-lime-neon {
    --kng-agm-base: #0a1506;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0a1506 0%, #59ff6f 45%, #d7ff5c 100%);
    --kng-agm-mesh: radial-gradient(circle at 25% 25%, rgba(89, 255, 111, 0.6) 0%, rgba(89, 255, 111, 0) 60%),
        radial-gradient(circle at 75% 30%, rgba(215, 255, 92, 0.6) 0%, rgba(215, 255, 92, 0) 60%),
        radial-gradient(circle at 50% 85%, rgba(10, 21, 6, 0.85) 0%, rgba(10, 21, 6, 0) 60%);
}

.kng-agm-preset-mono-glass {
    --kng-agm-base: #0f1115;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0f1115 0%, #3d3f44 45%, #a8aab0 100%);
    --kng-agm-mesh: radial-gradient(circle at 20% 30%, rgba(168, 170, 176, 0.55) 0%, rgba(168, 170, 176, 0) 60%),
        radial-gradient(circle at 80% 25%, rgba(61, 63, 68, 0.6) 0%, rgba(61, 63, 68, 0) 60%),
        radial-gradient(circle at 50% 80%, rgba(15, 17, 22, 0.9) 0%, rgba(15, 17, 22, 0) 60%);
}

.kng-agm-preset-forest-dew {
    --kng-agm-base: #0a1a12;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0a1a12 0%, #1e5a3a 45%, #7ee8a5 100%);
    --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(126, 232, 165, 0.6) 0%, rgba(126, 232, 165, 0) 60%),
        radial-gradient(circle at 75% 35%, rgba(30, 90, 58, 0.7) 0%, rgba(30, 90, 58, 0) 60%),
        radial-gradient(circle at 50% 80%, rgba(10, 26, 18, 0.9) 0%, rgba(10, 26, 18, 0) 60%);
}

.kng-agm-preset-candy-pop {
    --kng-agm-base: #2d0a2a;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #2d0a2a 0%, #ff6b9d 45%, #ffc857 100%);
    --kng-agm-mesh: radial-gradient(circle at 25% 20%, rgba(255, 107, 157, 0.65) 0%, rgba(255, 107, 157, 0) 60%),
        radial-gradient(circle at 80% 30%, rgba(255, 200, 87, 0.6) 0%, rgba(255, 200, 87, 0) 60%),
        radial-gradient(circle at 50% 85%, rgba(45, 10, 42, 0.9) 0%, rgba(45, 10, 42, 0) 60%);
}

.kng-agm-preset-midnight-blue {
    --kng-agm-base: #050a1a;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #050a1a 0%, #0a2463 45%, #247ba0 100%);
    --kng-agm-mesh: radial-gradient(circle at 20% 30%, rgba(36, 123, 160, 0.6) 0%, rgba(36, 123, 160, 0) 60%),
        radial-gradient(circle at 80% 20%, rgba(10, 36, 99, 0.7) 0%, rgba(10, 36, 99, 0) 60%),
        radial-gradient(circle at 50% 85%, rgba(5, 10, 26, 0.9) 0%, rgba(5, 10, 26, 0) 60%);
}

.kng-agm-preset-rose-gold {
    --kng-agm-base: #1a0f0f;
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #1a0f0f 0%, #b76e79 45%, #f7d1ba 100%);
    --kng-agm-mesh: radial-gradient(circle at 25% 25%, rgba(247, 209, 186, 0.6) 0%, rgba(247, 209, 186, 0) 60%),
        radial-gradient(circle at 75% 30%, rgba(183, 110, 121, 0.65) 0%, rgba(183, 110, 121, 0) 60%),
        radial-gradient(circle at 50% 80%, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0) 60%);
}

/* Custom Colors Override */
.kng-agm-custom-yes.kng-agm-type-gradient {
    --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), var(--kng-agm-color-1, #0b1020) 0%, var(--kng-agm-color-2, #3dd6d0) 50%, var(--kng-agm-color-3, #5878ff) 100%);
    --kng-agm-base: var(--kng-agm-color-1, #0b1020);
}

.kng-agm-custom-yes.kng-agm-type-mesh {
    --kng-agm-mesh: radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--kng-agm-color-2, #3dd6d0) 65%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--kng-agm-color-3, #5878ff) 60%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--kng-agm-color-1, #0b1020) 90%, transparent) 0%, transparent 60%);
    --kng-agm-base: var(--kng-agm-color-1, #0b1020);
}

```