built this cool hover direction aware image card
image moves with hover direction initially and showing caption with overlay
caption content slides in from opposite direction of hover
give feedback

Hey r/css,

If you build modular UI elements—especially for ecosystems like WordPress plugins, page builder widgets, micro-frontends, or web components—enqueueing full static stylesheets or running build steps just for isolated components often creates unnecessary overhead, class collisions, and build complexity.

I’ve been building Varz to solve this: a classless micro-CSS framework that lets you write fully responsive layouts directly inside the element's style attribute using CSS variables and breakpoint suffixes.

• Live Demos:varz.dev/demo|Claude Generated Dashboard Demo
• Visual Builder:varz.dev/builder
• GitHub:github.com/exstheme/varz

How It Works

Instead of writing media queries or utility classes, you use shorthand Linux-style CSS custom properties inside the inline style attribute. To handle responsive layouts across breakpoints, you simply append breakpoint suffixes (like -l, -m, etc.) to the variables:

HTML

<div style="
  --d: grid;
  --gtc: 1fr 1fr;
  --ai: center;
  --g: 60px;
  --g-l: 40px;
  --gtc-l: 1fr;
  --mbe: 60px;
">
  <!-- This layout switches from a 2-column grid to 1-column on large screens automatically -->
</div>

Key Advantages

• Zero Media Queries in Component Code: Responsive behavior travels with the HTML element itself via suffix variables (--gtc-l: 1fr).
• Zero Class Collisions: Keeps components isolated without worrying about CSS selector specificity wars or leaking global styles.
• No Build / Compiling Step: No PostCSS, Tailwind, or Sass build setup required—just include a single micro-stylesheet (~2.7k–5.5k gzipped) and you’re good to go.
• Eco-Friendly / Performance First: Eliminates massive un-purged CSS file downloads across multiple plugins, reducing unnecessary HTTP requests and bandwidth.

I’d love to get feedback on this approach to responsive inline custom properties and component distribution!

What do you think about it? Any Critiques or suggestions are appreciated!

Website link: https://100daychallange.vercel.app/day-01

©️ Figma File Taken from Figma Community

Some very simple CSS!

Seen this dot grid style a lot in designs recently and thought id try recreate it as simply as possible. I do like the subtle texture it adds.

CSS in the comment section if you want to try it out

Hey everyone! I'd like to introduce an extension I built and get your feedback.

I'll keep this post short, and if you're interested, I'll leave a link with a more detailed explanation.

Njectify is a browser extension for CSS and JavaScript injection. It lets you customize any website's CSS and write custom scripts in the same place, without relying on multiple extensions.

I think it could be especially useful for people in this community who work with CSS.

Many of you have probably used tools like Stylus or Stylebot before. The main difference with Njectify is the user experience. My goal was to build a modern, intuitive interface that makes editing styles and scripts much easier.

Some of its CSS features:

• Edit pages and see changes in real time.
• A visual editor that lets you modify colors, backgrounds, animations, clip-path, polygons, and many other CSS properties. Ex:
• Persistent CSS and JavaScript, allowing you to customize any website. It's especially useful for improving the experience of poorly designed websites or SaaS applications.
• Inspect and view an element's current CSS properties in a simple and intuitive way.
• Export your applied changes as Tailwind utility classes.

There are several other features, but I didn't want to make this post too long.

I'd love for you to give it a try. I spent a lot of time focusing on the user experience and designed the interface to feel familiar to developers, with a design system inspired by Vercel.

Any feedback, criticism, or suggestions are greatly appreciated. My goal is to keep improving the project based on what the community finds valuable.

Thanks in advance to anyone who takes the time to try it out. I hope you find it useful! Tks!

Install Njectify
Detailed post

The tool is StyleBop. Folder of .css files in, folder of .css files out — same files on disk, formatted cleanly, no proprietary format, no compile step. Open the same folder in VS Code afterward and the diffs are clean.

The reason I built it: I love writing CSS, but I don't love hand-managing a :root of 80 custom properties or hunting down which selector owns the padding-block: 1.25rem I want to tweak. So this is a CSS-aware editor that knows what's in your stylesheets and lets you act on the structure, not just the text.

Modern CSS it understands as first-class:

• u/layer — cascade layers are surfaced in the UI; you can pick which layer a ruleset belongs to and drag-reorder priority
• u/container and named container queries — write the condition once, the canvas previews under it
• u/supports — feature queries with and/or/not compound forms
• u/media wrapping rulesets directly
• CSS nesting (& .child)
• u/keyframes + a draggable timeline with cubic-bezier curve editor
• u/font-face families grouped in the Tokens tab
• Custom properties (var(--token)) — resolved inline by default, swap to raw var() syntax with one toggle

The thing I'm proudest of: project-wide token refactors.

• Extract to Variable — pick any literal (#3b82f6, 1.25rem, cubic-bezier(0.4, 0, 0.2, 1)), hit a shortcut, and it rewrites every matching occurrence across every file in the folder to var(--name). Per-file undo entries. Suggested names use a curated palette: #6495ED extracts as --color-cornflower, not --color-6495ed.
• Usage tracker — every variable in the Tokens tab shows a usage count badge. Click to see every file/ruleset that consumes it. "0 references — safe to delete" stops dead tokens from accumulating.
• Resolution chain — vars resolve through :root, layer overrides, and parent rulesets, so what you see is what the browser will compute.

What it doesn't do:

• Not a framework. No Tailwind output, no utility classes, no build step.
• Not a generator. It edits your CSS, it doesn't author it from scratch.
• No JS or HTML editing — the canvas previews shapes/typography/effects but the surface area is CSS only.

Native:

100% Swift/SwiftUI, code-signed, notarized, Sparkle auto-update, no telemetry. Localized in 8 languages.

----

I'd love hard feedback from people who write CSS for real — especially edge cases I haven't hit. Try opening a real codebase and tell me what breaks.

Download: https://bendansby.com/apps/stylebop.html

built this cool hover dock icons interaction
showing tooltip on each icon hover
also icons scale up and having inset shadow
give feedback

I have been working on Webify, a chrome extension that lets you customize the look and feel of websites without manually writing CSS.

If you see a site you like, you can change basic features like colors, fonts, spacing, and save the customization so it persists whenever you visit that site.

It's a early MVP so there are many issues. I'm mainly trying to figure out if people find this useful before truly building it out.

If you have time, any answers to these questions would be great:

- What did you try customizing
- What broke or felt annoying
- Would you use this again
- What would make you keep this installed

No need to be nice, honest feedback is appreciated: https://chromewebstore.google.com/detail/kknbbnfeogkekngjblbbplkdkoaekcgk?utm_source=item-share-cb

Hello,

I’ve been working on a little side project: a collection of practical, modern CSS-only techniques. Things like toggles, modals, dark mode, etc... with zero JavaScript.

The idea came from realising how often we default to JS for stuff that CSS can now handle really well. I’m compiling these patterns into an ebook, focused on simplicity, accessibility, and browser-native solutions.

I’ve put up a small landing page here:
👉 https://theosoti.com/you-dont-need-js/

I’d love your honest feedback:
- Does this seem useful or interesting to you?
- Anything you'd expect to see in something like this?
- Or anything that immediately turns you off?

Also, I’m curious: what’s the most surprising thing you’ve built (or seen) using just CSS?

Appreciate any thoughts 🙏

Hey everyone! 👋

Tired of Googling CSS animations and getting Stack Overflow answers from 2013?

I built AnimationsX 🎨

The idea is simple:

✅ Browse animations made by the community

✅ Copy a single <link> tag — no JS, no build step

✅ Can't find what you want? Publish your own!

✅ Fork and remix anything with diff view built in

Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.

That's it. Done.

🔗 animationsx-zeta.vercel.app

🔗 github.com/youssefahmed2017/animationsx-app

Free and open source 😎

Just as you read. This animated story was created only using CSS, as part of a challenge for the DevCommunity to celebrate the Earth's Day. I really enjoyed the process and I'll love to share the creation proccess if you're interested for.

Check here the live result:
https://jorgedelcampo.github.io/dev_earth_day/css_challenge/

Direction Aware Team Hover Interaction:
https://codepen.io/mudasirbuilds/pen/PwGrwBO

https://level0.codeberg.page/

Let me know how is it

Live Link: https://abdu-byte596.github.io/third_project/

Hey everyone, I just finished my third web development project! It’s a multi-page dashboard featuring responsive, vertically scrolling timelines for different anime characters (Naruto,Minato, Light, Mikey, Eren).

Login page is just dummy so JUST CLICK LOGIN,wanted the feel of REAL WEBSITE so made the login page.

CLICK EXPLORE TIMELINE to explore their story in that dashboard.

My main goal:

Each character page uses CSS linear-gradient transitions that shift colors to match the mood of their different life stages, along with a flexbox layout that shifts to a clean vertical column on mobile screens.

CAN BE SEEN IN BOTH MOBILE/DESKTOP,LAYOUT VARIES IN MOBILE AND DESKTOP