Oil Slick
Oil on water: four very soft colour patches that swell, shrink and slowly turn inside a dark card.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .osk-slick card (300×200 px, 20 px corners, #111 base) hides whatever overflows. Above its content, a ::before pseudo-element stacks four radial gradients at 40% opacity: pink top left, aqua top right, yellow at the bottom, violet on the right. A 20 px blur melts them together.
The oskFlow animation makes this layer breathe over 8 seconds: it grows to 120% while turning 10°, drops to 90% while turning −10°, then returns. The patches move as one, never drifting apart, like an iridescent puddle shifting.
The card's text stays under the colours and picks up their tint, which is part of the look. The layer ignores clicks (pointer-events: none), so you can put the .osk-slick class on a link or a button.
Accessibility
- Real text: "OIL SLICK" is in the HTML and reads normally; the colours are only a background.
- Reduced motion: with
prefers-reduced-motion: reducethe layer stops in its starting position and all four patches stay visible (measured: 2 looping animations → 0 for two copies). - Legibility: white text sits under colours at 40%; keep it bold and fairly large, or lower the hue opacity for small type.
- No interaction of its own: the effect reacts to neither hover nor keyboard. Placed on a link or button, that element handles focus and activation.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, nothing overflowing at 390 px, layer frozen under reduced motion. Minimum versions come from the inset property.
Without filter: blur() the four patches stay sharp, as gradient discs; the card and its text display normally.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0265-root">
<div class="osk-slick">OIL SLICK</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--osk-w and --osk-h |
300px and 200px |
Card size; 100% makes it follow its container (it never exceeds its width). |
--osk-radius |
20px |
Corner rounding; 0 for a section background, half the height for a pill button. |
--osk-base |
#111 |
Colour under the patches. |
--osk-c1 to --osk-c4 |
pink, aqua, yellow, violet at 40% | The four patches, in order top left, top right, bottom, right. Keep some transparency so they blend. |
--osk-blur |
20px |
Patch softness: stronger on a large surface, lighter on a small button. |
--osk-speed |
8s |
Length of a full cycle (swell, shrink, return). |
--osk-bg and --osk-min-h |
#0a0a0f and 300px |
Root background and minimum height; transparent and 0 to fit it into your page. |
FAQ
.osk-slick class on an <a> or a <button> inside the root: the colour layer lets clicks through. Remove the element's default underline or border in your CSS.
