You see a website effect and think, “I want that on my site.” Then reality hits – it probably needs code you don’t know, or your no-code tool just can’t pull it off.
Here’s the good news: none of that’s true anymore. You don’t need complex code or extra plugins to pull off effects like this. This article walks through five WordPress effects you can add visually, using Kirki alone.
Let’s get into it.
Follow Cursor Interaction
First up is an effect that instantly makes a site feel more modern and playful: the Follow Cursor interaction.
This effect causes an element to trail the user’s cursor as they move across the screen or within a section, turning an ordinary element into something that draws visitors’ attention.
How to Add Follow Cursor Interaction
Follow Cursor comes built into Kirki’s Interaction Library, so adding it takes just a few clicks – no code involved:
Step 1: Select your element and open the Interaction tab on the right panel.
Step 2: Under Library, select Follow Cursor. If it’s not visible, click Browse to see the full list. This adds the interaction and takes you to its settings.
Step 3: From the Follow Cursor settings, you can customize the interaction:
- Area: Set to Parent to keep the trail within the element’s parent container, or Viewport to let it span the full screen.
- Cursor: Show or hide the visitor’s actual cursor alongside the trailing element.
- Position: Set where the element sits relative to the cursor.
- Smoothness: Adjust how fluid the trailing motion feels.
And just like that, you’ve added the Follow Cursor interaction.
Sleek and Modern Glass Effect
Next is one of the most talked-about trends in modern web design: glassmorphism.
By mimicking frosted or translucent glass, it adds depth and a premium, futuristic feel while keeping designs clean. It shows up constantly in cards, nav menus, and buttons because it’s versatile enough to fit almost any layout.
You’d assume the Glass Effect would take lines and lines of CSS to pull off – and traditionally, it would. But with Kirki, it doesn’t.
How to Create the Glass Effect
Step 1: Select the element you want to apply the glass effect to. Make sure it doesn’t have a background, or reduce opacity if it’s a stylistic choice.
Step 2: In the Design tab on the right panel, scroll down to the Style section.
Step 3: Click the plus (+) icon in the top-right corner and select Glass Effect to add it.
Step 4: The Glass Effect settings panel will open with controls for Refraction, Depth, Dispersion, Blur, and Light. Adjust these to fine-tune the frosted glass look to your preference.
And there you have it – the Glass Effect, with no CSS required.
Playful Spring-Based Transition
Spring-based transitions bring natural, playful motion to a site.
Instead of moving an element from point A to point B and easing to a stop, this effect mimics real-world physics – the element overshoots slightly, then settles, the way a spring would.
It works especially well for hover states, button clicks, modal reveals, and section animations – anywhere you feel the motion needs an extra oomph.
In Kirki, you can set one up in two places: the Transitions section in the Design tab, for any element state-based interaction, or the Custom Timing Editor within any trigger-based interaction.
How to Add Spring-Based Transitions
Step 1: Select your trigger element, open the Interaction tab, and choose your desired trigger, like, say, Tab Switch (a special trigger specific to the Tab element).
Step 2: Select In View (or the initial state of whichever trigger you chose) to add a response and open the Interaction Timeline Editor.
Step 3: Add your target element – either click it on the Canvas, or click the plus icon next to it in the Layers panel.
Step 4: Click next to the target in the Interaction Editor and select the property you want to animate.
Step 5: Set the property’s values, along with duration and delay, from the section on the right.
Step 6: The animation now works, but it’s still a standard transition. To add the spring effect, click the property, then click the graph icon next to the Easing dropdown to open the Transition settings.
Step 7: Switch to the Spring tab and adjust Curve, Duration, Delay, and Bounce until the motion feels right.
Step 8: Back in the Interactions tab, click the ellipsis icon next to In View, select Duplicate to Out Of View, then reverse the property values so the animation returns smoothly to its starting state.
These steps walk through animating a single target – but the same approach scales. Add more targets, more properties, and you can build something as intricate as what’s shown in the preview, all without code.
Alternatively, if you’re going for something simpler, apply spring transitions directly from the Transitions section in the Design tab, based on element states like hover or focus – no interaction setup required. Ideal for quick motion, like a hover effect.
Advanced Text Effects: Shadows, Gradients, & Clip Masks
Text does more than fill space on a website – it highlights key messages, communicates brand value, and drives action.
But often, the messages that matter most blend right into the design instead of standing out. That’s where advanced text effects come in. A subtle shadow adds depth and improves readability. A gradient makes a heading impossible to skim past. A clip mask turns plain text into a bold visual moment.
With Kirki, you can create all three effects visually, with no code.
How to Add Text Shadow
Step 1: Select your text element and, in the Design tab, scroll down to the Style section.
Step 2: Click Add next to Shadows. This adds the shadow and opens the Text Shadow panel.
Step 3: Adjust Position (X and Y offset), Blur, and Color to get the depth and contrast you want.
And that’s it – text shadow added.
How to Create Gradient Text
Step 1: Select your text element and, in the Design tab, scroll down to the Style section.
Step 2: Select the Color field to open the Fill panel, then switch to any Gradient Fill type – Linear, Radial, or Conic (tabs 2, 3, and 4).
Step 3: Use the controls to choose colors, position color stops, and adjust the angle or direction to fine-tune the look.
Kirki automatically clips gradient fills to the text shape, so the moment you apply one, it’s already sitting perfectly within the lettering.
How to Add a Text Clip Mask Effect
Step 1: Select your text element and, in the Design tab, scroll down to the Style section.
Step 2: Select the Color field to open the Fill panel, then switch to the Image Fill (fifth tab).
Step 3: Click Upload to upload a new image, or Browse to pick one from your Media Library. Then use the Size, Repeat, and Position fields to adjust it.
Just like with gradients, Kirki automatically clips the image to the text shape – no masking step required.
And with that, your plain text becomes a bold focal point that stops visitors mid-scroll.
That said, use these effects sparingly. Stack too many and you get visual noise instead of visual impact – a shadow here, a gradient there, applied with intent, does more than all three at once.
Beyond this, Kirki’s interaction library offers a whole host of quick, modern interactions. Check out our interaction library demo to see them in action.
Level Up Your WordPress Website With Kirki
From sleek glass effects to playful spring transitions and cursor follow interactions – these are just a handful of what’s possible in WordPress without touching code, as long as you’ve got the right tool for it.
With Kirki, effects like these simply take minutes, not plugins or extra cost.
So go build something that actually looks modern – Kirki makes it easy.
