- You’ll build
- Animated Gradient Background in WordPress
- Code required
- HTML + CSS + JS
- Installation
- Theme and role dependent
On this page
Before you startHow the gradient movesAdd it to WordPressChoose colors and timingCommon mistakes and fixesAccessibility and performanceFrequently asked questionsCheck your installationComplete working code
The preview and download are generated from these same source files. The complete snippet requires permission to save inline styles and scripts.
<section class="iljs-demo iljs-gradient"><div><span>MADE TO FEEL DIFFERENT</span><h2>Let your ideas flow.</h2><p>A soft, shifting canvas for your next great thing.</p><button type="button" aria-pressed="false">Pause animation</button></div></section>
/* Change the values here, keeping the iljs- prefix to avoid theme conflicts. */
.iljs-demo { --iljs-accent:#9235f6; --iljs-radius:18px; font-family:system-ui,sans-serif; color:#242038; width:min(620px,100%); margin:auto; }
.iljs-demo button,.iljs-demo a { font:inherit; }
.iljs-demo button:focus-visible,.iljs-demo a:focus-visible,.iljs-demo input:focus-visible,.iljs-demo summary:focus-visible { outline:3px solid #c491ff; outline-offset:4px; }
.iljs-gradient { --iljs-speed:14s; --iljs-color-one:#7532c5;--iljs-color-two:#ef83b7;--iljs-color-three:#7462ef;background:linear-gradient(125deg,var(--iljs-color-one),var(--iljs-color-two),var(--iljs-color-three));background-size:300% 300%;animation:iljs-flow var(--iljs-speed) ease infinite;border-radius:var(--iljs-radius);padding:65px 32px;text-align:center;color:#fff; }
.iljs-gradient h2 { font-size:36px;line-height:1.15;margin:20px 0 15px; }
.iljs-gradient span { font-size:10px;letter-spacing:2px; }
.iljs-gradient p { font-size:14px; }
.iljs-gradient button { color:#fff;background:#1f123830;border:1px solid #ffffff60;border-radius:30px;padding:10px 18px;cursor:pointer; }
.iljs-gradient[data-paused="true"] { animation-play-state:paused; }
@keyframes iljs-flow { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@media(prefers-reduced-motion:reduce){.iljs-gradient{animation:none}}
(() => {
const init=()=>document.querySelectorAll('.iljs-gradient').forEach(root=>{
if(root.dataset.iljsReady)return;root.dataset.iljsReady='true';const button=root.querySelector('button');
button.addEventListener('click',()=>{const paused=root.dataset.paused!=='true';root.dataset.paused=String(paused);button.setAttribute('aria-pressed',String(paused));button.textContent=paused?'Resume animation':'Pause animation';});
});
document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init,{once:true}):init();
})();
<section class="iljs-demo iljs-gradient"><div><span>MADE TO FEEL DIFFERENT</span><h2>Let your ideas flow.</h2><p>A soft, shifting canvas for your next great thing.</p><button type="button" aria-pressed="false">Pause animation</button></div></section>
<style>
/* Change the values here, keeping the iljs- prefix to avoid theme conflicts. */
.iljs-demo { --iljs-accent:#9235f6; --iljs-radius:18px; font-family:system-ui,sans-serif; color:#242038; width:min(620px,100%); margin:auto; }
.iljs-demo button,.iljs-demo a { font:inherit; }
.iljs-demo button:focus-visible,.iljs-demo a:focus-visible,.iljs-demo input:focus-visible,.iljs-demo summary:focus-visible { outline:3px solid #c491ff; outline-offset:4px; }
.iljs-gradient { --iljs-speed:14s; --iljs-color-one:#7532c5;--iljs-color-two:#ef83b7;--iljs-color-three:#7462ef;background:linear-gradient(125deg,var(--iljs-color-one),var(--iljs-color-two),var(--iljs-color-three));background-size:300% 300%;animation:iljs-flow var(--iljs-speed) ease infinite;border-radius:var(--iljs-radius);padding:65px 32px;text-align:center;color:#fff; }
.iljs-gradient h2 { font-size:36px;line-height:1.15;margin:20px 0 15px; }
.iljs-gradient span { font-size:10px;letter-spacing:2px; }
.iljs-gradient p { font-size:14px; }
.iljs-gradient button { color:#fff;background:#1f123830;border:1px solid #ffffff60;border-radius:30px;padding:10px 18px;cursor:pointer; }
.iljs-gradient[data-paused="true"] { animation-play-state:paused; }
@keyframes iljs-flow { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@media(prefers-reduced-motion:reduce){.iljs-gradient{animation:none}}
</style>
<script>
(() => {
const init=()=>document.querySelectorAll('.iljs-gradient').forEach(root=>{
if(root.dataset.iljsReady)return;root.dataset.iljsReady='true';const button=root.querySelector('button');
button.addEventListener('click',()=>{const paused=root.dataset.paused!=='true';root.dataset.paused=String(paused);button.setAttribute('aria-pressed',String(paused));button.textContent=paused?'Resume animation':'Pause animation';});
});
document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init,{once:true}):init();
})();
</script>Before you start
The snippet needs markup and styles, plus a small script for pausing. It does not require a plugin, image, canvas, or animation library in an unrestricted installation. A restricted account may still need administrator help to save CSS or JavaScript. Read the WordPress code installation guide if you are unsure which editor fields accept each language.
How the gradient moves
The .iljs-gradient element owns three color variables and --iljs-speed. CSS uses those colors in a 125-degree linear gradient, then makes the background three times the section’s size. The iljs-flow animation changes background-position from one side to the other. Because the text is not transformed, its reading position stays stable throughout the animation.
The initial cycle lasts 14 seconds. An ease timing function slows the movement at each end instead of snapping back abruptly. The first and last keyframes share the same position, so the loop returns naturally. Corner clipping comes from the section’s border radius; there is no separate moving overlay to block pointer input.
JavaScript initializes each gradient instance independently, finds its button, and toggles a data-paused attribute. The corresponding CSS sets animation-play-state: paused. The button’s pressed state and text change together. This pauses the current appearance rather than removing the gradient or moving it suddenly back to the first frame.
Add it to WordPress
- Add a Custom HTML block to your draft page and paste the HTML fragment. Keep the outer
.iljs-gradientclass and the inner content wrapper. - Install the CSS through your theme’s available Additional CSS interface or an approved stylesheet. Follow the custom CSS setup guide if the location is unclear.
- Install the script through a permitted method. WordPress 7.0’s dedicated CSS and JavaScript panels are conditional on
unfiltered_html; they are not available to every editor role. - Save, then inspect the front-end page. Confirm that the gradient moves, the text remains readable, and the pause control changes both its label and the motion state.
- Customize the copy and colors only after the original version works. This gives you a known baseline if an edit changes the appearance unexpectedly.
For a classic theme, page-level HTML still goes in the content editor. Additional CSS is appropriate for styling, and a child theme can enqueue a script. For a block theme, the page-level effect does not require replacing a template part. Elementor users can use an HTML widget, with styling and scripts supplied through available supported interfaces. Restricted hosting may sanitize the complete snippet; an approved CSS-only static gradient is a useful fallback when scripting is not permitted.
Choose colors and timing
The first color, --iljs-color-one, begins at purple #7532c5. The second is pink #ef83b7, and the third is a cool purple #7462ef. Change those declarations to your brand palette. Keep the white text in mind at the brightest frame, not just at the initial position. A color combination that looks readable when purple is dominant may fail when pale pink moves underneath the heading.
Use --iljs-speed: 20s for gentler movement. Faster is not automatically more engaging, especially behind a long explanation. To stop the effect entirely, remove the animation declaration and retain the gradient. To change the color flow, edit the 125-degree angle. To change its visual softness, adjust the background size; a much smaller background gives the colors less distance to travel.
The sample’s padding allows headings to wrap without cropping. Do not replace that with a short fixed height simply because it matches a desktop screenshot. Consider the stars section when you want mostly still color with small decorative accents instead of broad movement.
Common mistakes and fixes
The gradient is visible but stationary. Reduced motion may be enabled, the animation rule may not have saved, or the section may already have data-paused="true". Check those causes before changing the keyframes.
The colors do not change after editing. Make sure you changed the variables on .iljs-gradient, rather than adding unrelated variables to a theme wrapper. Clear the page cache and inspect the front-end rule that wins in your browser’s Styles panel.
The heading disappears against one color. Review the full animation cycle. Darken the brightest stop or use darker text throughout if the entire palette is light. A text shadow is not a reliable substitute for adequate foreground contrast.
The pause button is present but inactive. The visual CSS can work even when WordPress removed the script. Check the saved content and the installed JavaScript path. The JavaScript installation guide explains script stripping and load-order checks.
A call to action looks like plain text. Theme styles may override nested links. Use a scoped button design and check specificity. The animated gradient button provides a separate effect whose styles do not require changing every link on the site.
Accessibility and performance
The heading and paragraph remain real text. The pause button works through normal keyboard activation, and its state is exposed with aria-pressed. Reduced motion disables the animation without hiding the content. If you add links, test focus outlines against every gradient color.
Background-position animation may require painting, so use this on a modest section rather than a full-page canvas. The browser does not need to download imagery, but that does not make unlimited animation free. Avoid adding several fast-moving gradient sections on the same page. On phones, check both wrapping and how visually active the section feels while scrolling.
Frequently asked questions
Can I use this without JavaScript?
You can use a static gradient without JavaScript. The supplied moving version includes a script because visitors need a direct way to pause it. Removing the script while leaving a visible pause control produces an unfinished interaction.
Does it change my theme’s global background?
No. The declarations are scoped to .iljs-gradient. To apply the effect to an existing block, you must preserve its content structure and assign the appropriate class. Avoid changing body unless you intend to affect the whole page.
Can the gradient sit behind a complete header?
A section can provide the backdrop for a header, but installing a global header is a separate task. The glassmorphism header describes an actual header replacement path.
Check your installation
Watch one full cycle, pause and resume it, and inspect the section on a phone-sized viewport. Confirm that the brightest frame still supports readable text and that reduced motion leaves a useful static hero.
