# king-addons/51.1.83/includes/widgets/Interactive_Gradient_Mesh/style.css

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

- Page: https://pluginprobe.com/plugins/king-addons/51.1.83/code/includes/widgets/Interactive_Gradient_Mesh/style.css
- Raw: https://pluginprobe.com/plugins/king-addons/51.1.83/raw/includes/widgets/Interactive_Gradient_Mesh/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/widgets/Interactive_Gradient_Mesh/style.css#L10-L20`.

```css
.king-addons-gradient-mesh {
    --kng-mesh-speed: 40;
    --kng-mesh-saturate: 110%;
    --kng-mesh-contrast: 105%;
    --kng-mesh-blur: 0px;
    --kng-mesh-brightness: 100%;
    --kng-mesh-hue: 0deg;
    --kng-mesh-noise-opacity: 0.12;
    --kng-mesh-vignette-opacity: 0;
    --kng-mesh-vignette-color: rgba(0, 0, 0, 0.6);

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.king-addons-gradient-mesh--valign-top {
    align-items: flex-start;
}

.king-addons-gradient-mesh--valign-bottom {
    align-items: flex-end;
}

.king-addons-gradient-mesh::before,
.king-addons-gradient-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.king-addons-gradient-mesh::before {
    background: radial-gradient(circle at center, transparent 0%, var(--kng-mesh-vignette-color) 85%);
    opacity: var(--kng-mesh-vignette-opacity);
}

.king-addons-gradient-mesh::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
    opacity: 0;
    mix-blend-mode: soft-light;
}

.king-addons-gradient-mesh.has-noise::after {
    opacity: var(--kng-mesh-noise-opacity);
}

.king-addons-gradient-mesh__bg,
.king-addons-gradient-mesh__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.king-addons-gradient-mesh__bg,
.king-addons-gradient-mesh__canvas {
    background-size: 200% 200%;
    filter: saturate(var(--kng-mesh-saturate)) contrast(var(--kng-mesh-contrast)) blur(var(--kng-mesh-blur)) brightness(var(--kng-mesh-brightness)) hue-rotate(var(--kng-mesh-hue));
    transition: filter 0.3s ease;
}

.king-addons-gradient-mesh__canvas {
    display: none;
}

.king-addons-gradient-mesh.is-canvas .king-addons-gradient-mesh__bg {
    opacity: 0;
}

.king-addons-gradient-mesh.is-canvas .king-addons-gradient-mesh__canvas {
    display: block;
}

.king-addons-gradient-mesh.is-animated[data-motion="drift"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-drift calc(80s - (var(--kng-mesh-speed) * 0.6s)) ease-in-out infinite;
}

.king-addons-gradient-mesh.is-animated[data-motion="pulse"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-pulse calc(90s - (var(--kng-mesh-speed) * 0.6s)) ease-in-out infinite;
}

.king-addons-gradient-mesh.is-animated[data-motion="wave"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-wave calc(70s - (var(--kng-mesh-speed) * 0.5s)) ease-in-out infinite;
}

@keyframes kng-mesh-drift {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes kng-mesh-pulse {
    0% {
        background-position: 40% 40%;
        transform: scale(1);
    }
    50% {
        background-position: 60% 60%;
        transform: scale(1.02);
    }
    100% {
        background-position: 40% 40%;
        transform: scale(1);
    }
}

@keyframes kng-mesh-wave {
    0% {
        background-position: 20% 30%;
    }
    50% {
        background-position: 80% 40%;
    }
    100% {
        background-position: 20% 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .king-addons-gradient-mesh.is-animated .king-addons-gradient-mesh__bg {
        animation: none;
    }
}

.king-addons-gradient-mesh__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.king-addons-gradient-mesh--align-left .king-addons-gradient-mesh__overlay {
    text-align: left;
}

.king-addons-gradient-mesh--align-right .king-addons-gradient-mesh__overlay {
    text-align: right;
}

.king-addons-gradient-mesh__content {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* The copy is white and the mesh can be any colour the user picks, including
       very pale ones. This scrim sits only behind the text, fades out well before
       the edges, and keeps the wording readable on any mesh. */
    padding: 26px 22px;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 55%,
        rgba(0, 0, 0, 0) 78%);
}

.king-addons-gradient-mesh__template {
    width: 100%;
}

.king-addons-gradient-mesh--align-left .king-addons-gradient-mesh__content {
    margin-left: 0;
}

.king-addons-gradient-mesh--align-right .king-addons-gradient-mesh__content {
    margin-right: 0;
}

/* The mesh defaults to pale colours while the copy is white, so without this the
   heading and eyebrow are close to invisible. A soft shadow restores legibility
   over any mesh, and leaves the colours themselves to the widget's controls. */
.king-addons-gradient-mesh__subtitle,
.king-addons-gradient-mesh__title,
.king-addons-gradient-mesh__text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}

.king-addons-gradient-mesh__subtitle {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
}

.king-addons-gradient-mesh__title {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    color: #ffffff;
}

.king-addons-gradient-mesh__text {
    color: rgba(255, 255, 255, 0.94);
    font-size: 16px;
    line-height: 1.6;
}

.king-addons-gradient-mesh__actions {
    margin-top: 8px;
}

.king-addons-gradient-mesh__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
}

.king-addons-gradient-mesh__button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

.king-addons-gradient-mesh__export {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 12px;
    max-width: 320px;
    color: #e2e8f0;
    display: none;
    gap: 8px;
}

.king-addons-gradient-mesh__export textarea {
    width: 100%;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    resize: vertical;
}

.king-addons-gradient-mesh__export-copy {
    background: rgba(56, 189, 248, 0.24);
    color: #e0f2fe;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.king-addons-gradient-mesh.is-editor .king-addons-gradient-mesh__export {
    display: grid;
}

.king-addons-gradient-mesh.is-fallback .king-addons-gradient-mesh__bg {
    background-image: none !important;
}

```