Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

A student asked me to "nerd snipe" this gradient effect. At first I was quite puzzled 🤔 CSS? SVG? Shaders? A quick inspection revealed the secret! Basic demo and full lesson video in thread.

snorklTV's profile picture

Carl 💥 Creative Coding Club

6,078 subscribers

103,280 Aufrufe • vor 9 Monaten •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)
0:27

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)

Rebane

984,971 Aufrufe • vor 1 Jahr

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:
1:23

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

Wes Bos

188,168 Aufrufe • vor 3 Jahren

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below
0:38

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

balint

1,578,110 Aufrufe • vor 10 Monaten

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!
3:17

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

231,873 Aufrufe • vor 1 Jahr

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,576 Aufrufe • vor 11 Monaten

Google Gemini 2.0 Realtime just helped me edit a video in Adobe Premiere Pro. Using the live screen feature it was able to see what I was doing and guide me within seconds for how to add a basic blur effect. This is a game changer. Absolutely incredble.
1:28

Google Gemini 2.0 Realtime just helped me edit a video in Adobe Premiere Pro. Using the live screen feature it was able to see what I was doing and guide me within seconds for how to add a basic blur effect. This is a game changer. Absolutely incredble.

Jerrod Lew

323,212 Aufrufe • vor 1 Jahr

Whilst I was at the protest in Rosslare, Ireland today, I bumped into a man that had come to live and work in Ireland from Pakistan. He was reluctant at first but he had a quick chat with me. Head over to for full report and to support our journalism.
3:47

Whilst I was at the protest in Rosslare, Ireland today, I bumped into a man that had come to live and work in Ireland from Pakistan. He was reluctant at first but he had a quick chat with me. Head over to for full report and to support our journalism.

S A M M Y Woodhouse

63,672 Aufrufe • vor 1 Jahr

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h
0:35

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

66,853 Aufrufe • vor 1 Monat

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself
6:51

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,696 Aufrufe • vor 1 Jahr

⛔️ I asked people at the demonstrations why they came out to support #Sudan and what they wanted to say about the AlFashir massacres. What was their message? These were their answers (Thread). First, a student from Newcastle university shared RSF crimes and violence against women
0:34

⛔️ I asked people at the demonstrations why they came out to support #Sudan and what they wanted to say about the AlFashir massacres. What was their message? These were their answers (Thread). First, a student from Newcastle university shared RSF crimes and violence against women

Roaa Elhag

21,616 Aufrufe • vor 7 Monaten

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅
0:21

I wanted to visualize color spaces so badly that the first version of Hueplot worked simply on divs. I used CSS as a 3D engine, and no canvas or SVG was used Still can't believe it worked, what a dumb idea 😅

Alexey Ardov

40,819 Aufrufe • vor 7 Monaten

taegunv customize behind! 🧸 this is just a story but before i went to record the demo for customize, i actually asked taerae hyung to come with me. i felt like we needed taerae hyung for this demo to really bring out the right vibe. and the song is quite high too. so i asked him "i'm going to record a demo now can you come and do it with me?" and when taerae hyung asked "what will you give me?" i said "i'll buy you a meal" and he said "okay i'll be in touch," but he didn't contact me. so i went and did it by myself. that's why i ended up doing it alone.
1:08

taegunv customize behind! 🧸 this is just a story but before i went to record the demo for customize, i actually asked taerae hyung to come with me. i felt like we needed taerae hyung for this demo to really bring out the right vibe. and the song is quite high too. so i asked him "i'm going to record a demo now can you come and do it with me?" and when taerae hyung asked "what will you give me?" i said "i'll buy you a meal" and he said "okay i'll be in touch," but he didn't contact me. so i went and did it by myself. that's why i ended up doing it alone.

꾸 🍎

40,328 Aufrufe • vor 1 Monat

Quick tip for my graphic designers, In PS, overlay a photo or texture and apply a clipping masked gradient map. (Color to BLK) Open the layer options of the overlay texture, Hold ALT to split the anchor of "Blend if" Underlying layer. See-through Texture Gradient Effect.
0:36

Quick tip for my graphic designers, In PS, overlay a photo or texture and apply a clipping masked gradient map. (Color to BLK) Open the layer options of the overlay texture, Hold ALT to split the anchor of "Blend if" Underlying layer. See-through Texture Gradient Effect.

Seso

168,938 Aufrufe • vor 3 Jahren

The rhythm system in Scratchin' Melodii has changed quite a bit since the 2022 demo. I definitely would like to improve the in-game tutorial in the full game, but for now I thought I'd take some time to explain some of it in a thread!
0:36

The rhythm system in Scratchin' Melodii has changed quite a bit since the 2022 demo. I definitely would like to improve the in-game tutorial in the full game, but for now I thought I'd take some time to explain some of it in a thread!

LJ - (Scratchin' Melodii Dev)

85,984 Aufrufe • vor 2 Jahren

Discovering that Steve Ruiz's tldraw uses a mix of CSS and SVG made me want to try building a CSS renderer for Heerich.js! Well, its going well!! And its super fast.
0:30

Discovering that Steve Ruiz's tldraw uses a mix of CSS and SVG made me want to try building a CSS renderer for Heerich.js! Well, its going well!! And its super fast.

David Aerne

17,623 Aufrufe • vor 3 Monaten

1/ This is the coolest product built with zk that I have seen ever. You can turn any physical objects into private keys! I asked for a repeat demo, because I had to take a video. Rough technical explanation in the thread
1:52

1/ This is the coolest product built with zk that I have seen ever. You can turn any physical objects into private keys! I asked for a repeat demo, because I had to take a video. Rough technical explanation in the thread

Dr. Z

21,696 Aufrufe • vor 1 Jahr

#devtober day 22 - magma ball visual arrangement This was one of the trickier ones to date, and was the first to require 2 unique shaders -- a wobbly lava one and a decal to let me partially "reveal" a lava texture in the travel path.
0:25

#devtober day 22 - magma ball visual arrangement This was one of the trickier ones to date, and was the first to require 2 unique shaders -- a wobbly lava one and a decal to let me partially "reveal" a lava texture in the travel path.

TreyH

12,614 Aufrufe • vor 8 Monaten

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding
0:48

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding

Hans Chiu

11,362 Aufrufe • vor 1 Monat

figured out how to do motion blurs in the browser using svg filters and css
0:35

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 Aufrufe • vor 7 Monaten

“If a nerd really liked Picross and coding shaders 🤣” - me, pitching my game
0:58

“If a nerd really liked Picross and coding shaders 🤣” - me, pitching my game

Walaber

10,880 Aufrufe • vor 1 Jahr