you can totally do it with css 🧑‍🍳 use... a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙show more

css trick for the "shine" border 🧑‍🍳 take a... pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer moveshow more

Need a gradient border? Use CSS background-clip 🤙 input... { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }show more

Little progressively enhanced CSS border reveal button using mask... && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }show more

I made an HTML/DOM viewer you can paste into... your console to view or debug any website in 3D. Choose from random/gradient/clear colors or whether layers have sides. You can save it as a bookmarklet so it's 1 click away. It's just a tiny IIFE JS function.show more

CSS Tip! 🤙 These buttons from Michaël are ace... 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇show more

Old: just slap a gradient on it New: just... use a shader… shader it allshow more

Tips and tricks for creating a gradient on cake... frosting 😍😍show more

Framer February → Day 1 ✨ A quick and... easy way to add a smooth, animated, gradient border to a card in Framer. Let's get started ↓show more

Use CSS @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 to unlock things like > Animated... conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --𝚊𝚗𝚐𝚕𝚎 variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 fixes that with , and more @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 --𝚊𝚗𝚐𝚕𝚎 { 𝚜𝚢𝚗𝚝𝚊𝚡: ' '; 𝚒𝚗𝚑𝚎𝚛𝚒𝚝𝚜: 𝚏𝚊𝚕𝚜𝚎; 𝚒𝚗𝚒𝚝𝚒𝚊𝚕-𝚟𝚊𝚕𝚞𝚎: 𝟶𝚍𝚎𝚐; } .𝚌𝚊𝚛𝚍 { --𝚊𝚗𝚐𝚕𝚎: 𝟶𝚍𝚎𝚐; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝( 𝚟𝚊𝚛(--𝚊𝚗𝚐𝚕𝚎), #𝟹𝟾𝚋𝚍𝚏𝟾, #𝟶𝚎𝚊𝟻𝚎𝟿, #𝟸𝟻𝟼𝟹𝚎𝚋, #𝟷𝚎𝟺𝟶𝚊𝚏 ); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: --𝚊𝚗𝚐𝚕𝚎 𝟶.𝟾𝚜 𝚎𝚊𝚜𝚎; } .𝚌𝚊𝚛𝚍:𝚑𝚘𝚟𝚎𝚛 { --𝚊𝚗𝚐𝚕𝚎: 𝟺𝟻𝚍𝚎𝚐; } Defaults to initial value so you don't have to set them everytimeshow more

Langevin Monte Carlo allows you to draw samples from... a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.show more

Dither / halftone effects tutorial in After effects (No... plugins needed) 1. Create a Shape Layer (dot/circle) 2. Pre-comp it → add CC Tiler 3. Import your image/video 4. Add Card Dance to an Adjustment Layer 5. Set Gradient Layer 1 to your footage 6. Set X & Y Intensity to 1 Adjust Rows & Columns to tasteshow more

Oldies but goldies: Y Nesterov, A method for solving... a convex programming problem with convergence rate O(1/k^2). Improves the 1/k rate of vanilla gradient descent to 1/k^2.show more

if you’re dynamically masking a scroll container with css,... consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;show more

You can use the sniper to skip basically any... door with a lock on the other side. #ResidentEvil4Remakeshow more

the trick to this css card glow/shine effect is... blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!show more

Little simple trick i like using Screenshot a textlabel... Bloom filter it externally, just a quick layer in gimp Animate a gradient, make a "shine" layer. Will work from any angle really #robloxdev #robloxshow more

✨ Mini #Aseprite Tutorial: use the Gradient option for... a dynamic Dither brush! ✨ #dinchenix #pixelartshow more

Here is the prompt to create a liquid gold... nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.show more

How I built with Claude 👇 1. CSS linear-gradient... animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented 4. Save this if you want a corporate site that makes billion dollar clients take you seriously 🌐show more

If elements ever shift unexpectedly by a few pixels... during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.show more