Tag inspiration archive
CSS Design Inspiration
Curated collection of 62 standout UI, motion, and interaction designs tagged with "CSS" from creators on X.
CSS shadows. depth that actually feels real. - Ali Grids
CSS shadows. depth that actually feels real.
@AliGrids"can I use it for images?" – Yep! Could even combine it with CSS sc... - jhey ʕ•ᴥ•ʔ
"can I use it for images?" – Yep! Could even combine it with CSS scroll-driven animation CSS, am I right?
@jh3yyCreate image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 .𝚛𝚎𝚟𝚎𝚊�... - Manu Arora
Create image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 .𝚛𝚎𝚟𝚎𝚊𝚕 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟷𝟶𝟶% 𝟶 𝟶); 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 𝟷𝚜 𝚏𝚘𝚛𝚠𝚊𝚛𝚍...
@mannupaajiliquid slider <input type=range> + CSS + SVG filter + delta scale o... - jhey ʕ•ᴥ•ʔ
liquid slider <input type=range> + CSS + SVG filter + delta scale on pointermove
@jh3yyone way w/ css stack an image 2x filter 1st, unclip 2nd on :hover a... - jhey ʕ•ᴥ•ʔ
one way w/ css stack an image 2x filter 1st, unclip 2nd on :hover a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: c...
@jh3yyA CSS-only elastic hover effect, because why not? https://css-tip.c... - CSS by T. Afif
A CSS-only elastic hover effect, because why not? https://css-tip.com/elastic-hover/ A chrome-only experiment using shape(), sibling-index(), linear(), etc.
@ChallengesCsscustom <select> with CSS select { &, &::picker(select) { appearance... - jhey ʕ•ᴥ•ʔ
custom <select> with CSS select { &, &::picker(select) { appearance: base-select; } }
@jh3yyWild how far you can push "customizable select" with just #CSS - Adam Argyle
Wild how far you can push "customizable select" with just #CSS
@argyleinkThe new corner-shape CSS property unlocks exciting new UI patterns.... - Haz
The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;
@diegohazI was stunned when I came across this @Airbnb interaction last year... - gifted | Design Engineer
I was stunned when I came across this @Airbnb interaction last year, this is incredible work McLane! Then, I recreated it using @motiondotdev, Tailwind and React
@maryojo_molil css + svg glow loader prototype - jhey ʕ•ᴥ•ʔ
lil css + svg glow loader prototype
@jh3yya solid CSS technique for morphing surfaces anchor() + @starting-s... - jhey ʕ•ᴥ•ʔ
a solid CSS technique for morphing surfaces anchor() + @starting-style
@jh3yyNo dependencies bloat. Pure CSS animations.. Made with using Next.j... - Murat ALPAY
No dependencies bloat. Pure CSS animations.. Made with using Next.js and Tailwind CSS Try it live
@imuratalpayback on my tailwind canvas thingy, now with a little more code - nanda
back on my tailwind canvas thingy, now with a little more code
@nandafyireminder: you don't need duplicated text for this css text effect t... - jhey ʕ•ᴥ•ʔ
reminder: you don't need duplicated text for this css text effect text-shadow + 1lh translate span { text-shadow: 0 -1lh var(--clr); } a:is(:focus-visible, :hover) span { translat...
@jh3yyFit width text in 1 line of CSS `text-grow: per-line scale;` https:... - Adam Argyle
Fit width text in 1 line of CSS `text-grow: per-line scale;` https://nerdy.dev/css-text-grow (prototype in Canary 165+)
@argyleinkTip for notification badge appear animation to make it feel more na... - Jakub Antalik
Tip for notification badge appear animation to make it feel more natural: • For the scale transition, adjust the origin point to the bottom left • Use a subtle bounce on the scale...
@Jakubantaliktext-box: trim-both cap alphabetic removes the extra space above an... - Ibelick
text-box: trim-both cap alphabetic removes the extra space above and below text, so spacing become more predictable
@IbelickWhen nesting elements the outer border radius should always equal t... - Jakub Krehel
When nesting elements the outer border radius should always equal the inner border radius + padding.
@jakubkrehel
corner-shape: squircle; available in chrome for now used it recentl... - Ibelick
corner-shape: squircle; available in chrome for now used it recently on my site, no more clip-path or svg needed to achieve it
@IbelickText reveal animation tip for UI: here are my preferred specs that... - Jakub Antalik
Text reveal animation tip for UI: here are my preferred specs that I usually use for text reveal effects. I like to keep it subtle, with a shorter Y movement and a slight blur eff...
@JakubantalikIf you want to achieve the same effect as `active:scale-x` or `hove... - Jakub Krehel
If you want to achieve the same effect as `active:scale-x` or `hover:scale-x` but with spring animations, you can use the `whileTap` and `whileHover` gestures in Motion.
@jakubkrehelCSS card parallax with pointermove + custom props <div class=ring s... - jhey ʕ•ᴥ•ʔ
CSS card parallax with pointermove + custom props <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } tr...
@jh3yymessin' with css frosted + saturated borders using background-clip... - jhey ʕ•ᴥ•ʔ
messin' with css frosted + saturated borders using background-clip + backdrop-filter
@jh3yythe trick: SVG displacement filter via CSS filter property. use on... - jhey ʕ•ᴥ•ʔ
the trick: SVG displacement filter via CSS filter property. use on scaled duplicate content in the view finder element. that way, you don’t need to worry about backdrop-filter sup...
@jh3yyprogressive css-only pagination indicators w/ anchor positioning na... - jhey ʕ•ᴥ•ʔ
progressive css-only pagination indicators w/ anchor positioning nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the na...
@jh3yyplaying with easing in css is fun. here im using `ease-out-cubic` w... - Soren
playing with easing in css is fun. here im using `ease-out-cubic` with `200ms` duration. this works best for user initiated interactions with transforms. animations here using css...
@sorenblankMore @greensock Flip magic! Seamlessly switch between different gri... - Osmo
More @greensock Flip magic! Seamlessly switch between different grid layouts using this setup. It's perfectly synced with CSS variables to fully control the columns and gaps acros...
@osmosupplysidebar details CSS auto-height transition w/ grid li > div[inert]... - jhey ʕ•ᴥ•ʔ
sidebar details CSS auto-height transition w/ grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow ke...
@jh3yyIntroducing the dither plugin A CSS-only package to create dither e... - Florian
Introducing the dither plugin A CSS-only package to create dither effects
@flornkmIt's amazing how much you can do with CSS these days. - Haz
It's amazing how much you can do with CSS these days.
@diegohaz
Update: Sep 8, 2025 AlignUI just shipped support for Tailwind CSS v... - Erşad
Update: Sep 8, 2025 AlignUI just shipped support for Tailwind CSS v4.1 Full Tailwind v4.1 support OKLCH color system Simplified setup with theme directive Auto-detect for TypeScri...
@ersadworkdesigned and built this little gpu processing visualization with re... - Shivendra Singh Pawar
designed and built this little gpu processing visualization with react, css, svg and motion. link - https://gpu-processing.vercel.app
@shiv_visualPlayed with CSS animations. Design inspiration @tranmautritam. - v
Played with CSS animations. Design inspiration @tranmautritam.
@vojtikczhrajeGot carried away with this interactive module for breaking down the... - rauno
Got carried away with this interactive module for breaking down the CSS mask-image property
@raunofreibergParsing [CSS & JS] w/@necatikcl - Oğuz Yağız Kara
Parsing [CSS & JS] w/@necatikcl
@oguzyagizkaraThe button repo is now available on GitHub! Link in the post below.... - balnit
The button repo is now available on GitHub! Link in the post below. It's simply configurable using css variables, and now also responds to container size changes. Feel free to use...
@BalintFerenczyGot inspired by Resend's keyboard component, made something similar... - balnit
Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.
@BalintFerenczyMade by Motion/React & Tailwind CSS Inspired by @frannyfx - Ali Samadi
Made by Motion/React & Tailwind CSS Inspired by @frannyfx
@alisamadi__"Text circle animation (CSS only)" by Stijn Van Minnebruggen https:... - CodePen.IO
"Text circle animation (CSS only)" by Stijn Van Minnebruggen https://codepen.io/donotfold/pen/ZYYYJRV…
@CodePenA button from my tiny library. Made in @webflow with custom CSS. I'... - Eduard Bodak
A button from my tiny library. Made in @webflow with custom CSS. I'm using here no position absolute. You can see on hover that two backgrounds moving in and fill the button. Thos...
@eduardbodakRecently released a massive update for @slashapp - redesign, rebran... - Alex Barashkov
Recently released a massive update for @slashapp - redesign, rebranding, and development of the new website. - Next.js - Sanity - TailwindCSS - Rive
@alex_barashkovMade with Motion & Tailwind CSS - Ali Samadi
Made with Motion & Tailwind CSS
@alisamadi__Filled the placeholder section on the service page. Made in Webflow... - Eduard Bodak
Filled the placeholder section on the service page. Made in Webflow with custom CSS & JS. I want to show here that good animations can bring a good feeling to the user. Therefore...
@eduardbodakAdded another three new buttons to my tiny library among 37 other u... - Eduard Bodak
Added another three new buttons to my tiny library among 37 other unique buttons. Made in @webflow with custom CSS. It's a free cloneable. Check it out live! Link is in the commen...
@eduardbodakdynamic toggle with CSS :has() .control:not(:has(:first-of-type:che... - jhey ▲
dynamic toggle with CSS :has() .control:not(:has(:first-of-type:checked)) .indicator { translate: 100% 0; } leverage [type=radio]:checked with :has() to set the visuals
@jh3yyAdded the first step of the waitlist form to the price page. Made i... - Eduard Bodak
Added the first step of the waitlist form to the price page. Made in Webflow with custom CSS. There is this typical autofill from Chromium based Browsers. And normally when using...
@eduardbodakThe wheel section on the price page on mobile. Made in Webflow with... - Eduard Bodak
The wheel section on the price page on mobile. Made in Webflow with CSS & Locomotive Scroll v5. Fun fact. Nothing in this section is using position absolute. Everything is build w...
@eduardbodakMade by Motion/React & Tailwind Inspired by @sekachov - Ali Samadi
Made by Motion/React & Tailwind Inspired by @sekachov
@alisamadi__Added another three new buttons to my tiny library among 34 other u... - Eduard Bodak
Added another three new buttons to my tiny library among 34 other unique buttons. Made in @webflow with custom CSS. It's a free cloneable. Check it out live! Link is in the commen...
@eduardbodakNext section on the price page. The cards in a circular order and i... - Eduard Bodak
Next section on the price page. The cards in a circular order and it's rotating a bit on scroll. Made in Webflow with CSS & Locomotive Scroll v5. I call it wheel for now. This is...
@eduardbodakRecap of building the stage of the price page in Webflow with CSS &... - Eduard Bodak
Recap of building the stage of the price page in Webflow with CSS & GSAP
@eduardbodakgradient tracing with an underrated @raunofreiberg article made wit... - will
gradient tracing with an underrated @raunofreiberg article made with motion/tailwind
@willdphan
Introducing WebTUI, a modular CSS library that brings the beauty of... - IroncladDev
Introducing WebTUI, a modular CSS library that brings the beauty of Terminal UIs to the browser http://webtui.ironclad.sh
@IroncladDevHour 100/100 learning motion Made with React and Tailwind Interacti... - Vaun Blu
Hour 100/100 learning motion Made with React and Tailwind Interaction and design inspired by @KumailNanji
@vaunbluFree Button Friday. Added another three new buttons to my library a... - Eduard Bodak
Free Button Friday. Added another three new buttons to my library among 31 other unique buttons. Made in @webflow with custom CSS. This time I played around with clip-path and tri...
@eduardbodakAnimated Toggle ✧ Made with Tailwind and Motion React Design by @Ku... - LN
Animated Toggle ✧ Made with Tailwind and Motion React Design by @KumailNanji
@ln_dev7alrighty! marquee along path component is live on fancy! w/ a bunch... - daniel petho
alrighty! marquee along path component is live on fancy! w/ a bunch of customizations: - scroll based velocity - draggable - slowdown on hover - custom easing - mapping any CSS pr...
@nonzeroexitcodefinally got around to updating my site to @nextjs 15 + @tailwindcss... - Stammy
finally got around to updating my site to @nextjs 15 + @tailwindcss v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to compleme...
@Stammythere's a drop-in CSS library in the style of windows 98 - Aiden Bai
there's a drop-in CSS library in the style of windows 98
@aidenybai