I like this effect 🙂
Nice text-effect demo by Shireen Taj:
Using DevTools you can see that there’s a gradient background set onto the element.
By also applying
-webkit-background-clip: text; the gradient is only shown on the text itself.
The demo’s also fun to fork and remix:
Add some Houdini to animate it
Change the type of gradient
Rad fork by Adam Argyle:
Make the center follow the mouse
This one uses a tad of JS to update the Custom Properties:
Using a radial-gradient which gets a bit bouncy
Creating a CSS flashlight
It steers away from the multi-color aspect, but the rest of the code is the same:
The key parts to this demo are the
filter on the wrapping
.morphing element combined with the animated blurring on the
.word elements themselves. You need both to get the wanted effect.
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect.
GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails
Ana Tudor recently shared a trick on how to make an image partially greyscale:
#tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes.
background: url(cat) 50%/ cover,
linear-gradient(-45deg, transparent 50%, grey 0);
— Ana Tudor 🐯 (@anatudor) January 20, 2021
Here’s her code in a CodePen demo for you to play with:
☝️ Tip: Tweak the angle and the percentage of
transparent to see how it behaves.
Inspired by a CodePen demo by Jhey — in which he built image reveal on hover using
clip-path — Ana rebuilt his demo using her technique:
One advantage of Ana’s technique is that it doesn’t require duplicated images in the markup. A disadvantage though is that it only works with background images. Chrome only too, as it relies on
I like this form of code golfing 🙂
UPDATE 2021-02-02: Ana also made a non-Houdini version that uses
box-shadow on a wrapping element. Because of that you can simply leave your
img tags intact, so all cons of her first iteration have been nullified. Cool!
Nice pen by Aaron Iker:
It combines CSS Custom Properties, CSS Transitions, and SVG Animations using
The reason that it works with text that spans multiple lines is because of the (inline) span that’s being used inside the link.
feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings:
These lines aren’t injected using
::after or the like, but are done via backgrounds. The key CSS property you’re looking for is
display: inline; though, as set on the
p elements; without it, it won’t work.
That last swipe effect also uses
box-decoration-break clone; so that each line animates in parallel.
On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say:
What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though
clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛
🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.
UPDATE 2021.01.14: Besides using
clip-path, a more easy approach is to use
mix-blend-mode: difference; if all you’re doing is inverting colors.
Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about:
As explained over at CodyHouse, here’s how it’s done:
This effect uses the
clip-pathCSS property. The idea is to have a clone of the main header inside each
<section>of the page. Each clone will inherit the style of the section it belongs to.
All cloned headers are placed at the top of the page (with a fixed position). The
clip-pathproperty can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.
This creates the clipping transition effect between headers with different color themes.