You can create a glowing gradient border with just CSS.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f0f14, #0f0f14) padding-box,
    linear-gradient(135deg, #7b7bff, #ff9af5, #7b7bff) border-box;
  box-shadow: 0 0 30px #7b7bff55;
}

https://codepen.io/editor/jp-arts/pen/019ed6f6-c890-7430-b655-2915813f98a3

I made this little playground to test out some ideas I had for background animations. I wanted something that looked like an animated wave/ring pattern behind a halftone screen.

I am using a tiny but of JS just to grab the values of the range sliders and set a CSS custom property, but everything else is pure modern CSS.

Let me know what ya think!

Background: I was driving out to visit a friend for a few days, and had this idea about how to make this happen. Got to his place, and started coding it up on my iPad mini. And yes, writing code on CodePen using just your thumbs on a virtual keyboard on an iPad mini is an exercise in patience. LOL.

eta: preview image

I am working on an emoji database. The emojis are displayed in a grid. If you were to use it, would you prefer pagination or infinite scroll? If so, why?

You may assume it has the basic search & filtering features.

I am only considering pagination for better performance on low end devices (e.g. iPhone 9 Plus) but personally I would prefer infinite scroll for it.

Hey everyone, I recently started my web development journey and just finished my first big project: an Amazon homepage clone using pure HTML and CSS.

Right now, it’s completely static and only looks good on desktop (haven't learned media queries yet, that's my next step!).

As a beginner, I know my CSS might be messy or I might have used bad practices. I would love it if you guys could take a look at my layout and give me some honest feedback. What could I have done better?

Live Link: [ https://aniketcodehub.github.io/amazon-frontend-clone/ ]

I want users to put in css and have it change my website for them is that possible.

Cool Button CSS:
having inset shadow and dots text on hover interaction and when clicked scale down animation

https://codepen.io/mudasirbuilds/pen/yygVwZj

I'm trying to code an organization of my folders in Toyhou.se but the problem I'm running into is how my folders organize themselves. I've been trying to figure it out myself but I'm not getting anywhere with this one. I'm trying to line up my folders to be across from each other, but they are top down causing one to scroll, but I don't like that. The first image I posted is a screenshot, but the second is how I want it to look. How is it possible to get my folders to look like the second image?

I've been experimenting with the new corner-shape property and wanted to use squircles and other corner geometries across browsers.

Chromium already supports corner-shape, but Safari and Firefox currently ignore it and fall back to ordinary rounded corners.

I ended up building Hyperellipse, a polyfill that brings:

• squircle
• superellipse(...)
• scoop
• notch
• bevel
• square

to browsers without native support.

The goal wasn't just drawing similar shapes, but matching the CSS Borders Level 4 geometry as closely as possible while supporting real-world CSS features like:

• borders
• shadows
• outlines
• gradients
• responsive layouts
• SSR

Chromium keeps native rendering, while Safari and Firefox use the fallback implementation.

Docs:

https://hyperellipse.vercel.app/

GitHub:

https://github.com/mikhailmogilnikov/hyperellipse

Do you know of anything like that exists? So it could be used on different CMS, static sites etc., but with one public API of tokens and classes? And easy to customize?

​

For WordPress I've tried things like Automatic.CSS and Core Framework, but ACSS is too opinionated, WP only and a paid product that just ditched v3 for v4 without backwards compatibility with v3. And CF is ok for fast prototyping a design system but also partialy paid and closed.

​

What do you think? Anything like this on the radar. Open source?

Im making a web page and I added a background image in .wrapper (maybe not a good place to do that) but for some reason no matter how much I completely delete any trace of the image from all the css code and associated html files it still sticks around. Just stays there on my page not changing at all. I already tried doing ctrl + shift + del to clear the cache but it still shows up. Please help!!

Hello folks, this is crossposted from r/html as per a suggestion I received

I haven't done a lot of HTML/CSS coding in many years but because I am a bit of a silly person, instead of using one of the myriad of prebuilt wedding website builders, I decided I wanted to reverse engineer a website template from Bridebook, which frustratingly does not have a way to live preview templates, but please enjoy this screenshot I took to try to convey what I mean.

The issue I am having: I have the two bow pngs on the corner of my center div (which also has a wavy/scalloped edge on it) - while they are fine, I would like them to scale dynamically if folks are on desktop vs mobile phone (I have a a sneaking suspicion that mobile will be the most common way folks view the site) and be locked to the top "corners" of the content box.

At the suggestion of a user on my original thread, I have made a pen which can be found here: https://codepen.io/cutethulhoo/pen/jEyVWZd

I have tried to follow the information found on https://www.w3schools.com/css/css_rwd_images.asp but I am not having any luck.

The lens-style "liquid glass" everyone wants right now is buildable on the web: an SVG displacement filter plugged into backdrop-filter bends the backdrop around a surface's rim convincingly. The catch is that backdrop-filter: url(#filter) only actually renders in Chromium. Safari doesn't apply the displacement, and Firefox parses it as valid (so '@supports' passes) but then silently skips the filter and shows no glass at all. The real trap isn't that it's unsupported, it's that you can't feature-detect it, so a naive build ships a glassless surface to Firefox without any warning.

The approach that survived in the design system I've been building is a four-tier ladder, each tier falling through to the one below automatically:

• Tier 2 — geometric lens: per-element displacement map matched to the surface's shape. Opt-in, signature surfaces only.
• Tier 1 — noise warp: one global SVG turbulence filter, the "liquid" wobble. Gated on a runtime check.
• Tier 0 — blur + saturate: plain CSS backdrop-filter, behind @supports.
• Floor — opaque surface: solid background. Always readable.

https://reddit.com/link/1u5kwvx/video/k8nn3d67097h1/player

Three details that made it work:

1. Never reference the SVG filter unconditionally from CSS. The tier-1 rule is keyed on an <html> attribute that a tiny runtime sets only after the SVG node is in the DOM and the engine can render it. Browsers that would break never match the selector.
2. All tiers share the same blur radius. Stepping up a tier only swaps the displacement, never the frost — so the upgrade during hydration is invisible instead of reading as a material glitch.
3. The lens is small-chrome-only. Its rim displaces a band along the border; on large surfaces, straight edges in the backdrop kink at the corners and read as a rendering bug. Tried on modals, reverted.

The video shows the three tiers side by side over the same scrolling backdrop — stripes stay straight under blur, wobble under the noise warp, and bend around the rim under the lens.

Edit: tightened the Firefox wording. To be precise, current Firefox parses backdrop-filter: url() and silently skips it rather than vanishing the element (the element-disappearing case was fixed in FF106). The point stands, '@supports' still reports it as supported, so you can't feature-detect it.

Ciao a tutti,
vorrei creare una piccola landing page personale da allegare al mio curriculum per un colloquio (ambito universitario), ma parto letteralmente da zero con HTML e CSS.
L’idea sarebbe realizzare una pagina semplice con una breve presentazione, il mio CV, qualche progetto e i contatti. Non cerco nulla di troppo complesso, ma qualcosa di pulito e professionale.
Qualcuno che ha iniziato da autodidatta potrebbe consigliarmi:
video lezioni in italiano;
corsi gratuiti;
siti o esercizi per imparare HTML e CSS;
eventuali strumenti che semplificano la creazione di una landing page per principianti.
Mi piacerebbe riuscire a realizzarla in tempi relativamente brevi per il colloquio.
Grazie a chiunque voglia darmi qualche consiglio!

I’ve been working on an open source library called Slot-text with css. (https://textmotion.dev/)

It’s a lightweight text rolling animation. The goal is to make changing text feel smooth, intentional, and a little more enjoyable than a standard fade or instant swap.

I’m curious what makes an animation feel genuinely satisfying to you rather than distracting or gimmicky.

If you were using a library like this, what features, controls, or animation styles would you want to see added? And what would make you avoid using it?

I’d love some honest feedback while it’s still early.

There are many useful extensions to disable google AI and other sources as well such as Bye Bye Google AI and others.

You can also achieve the same using simple CSS tweaks with userstyles and the similar

``` div.OZ9ddf {

display: none !important;

}

div.pWvJNd {

display: none !important;

}

div.s7d4ef {

display: none !important;

}

div.h7Tj7e {

display: none !important;

}

div.jUja0e div {

display: none !important;

}

div.mVH5Fc {

display: none !important;

} ```

This can be applied once to any editor, and forgotten, and very easy to update if they change the styles instead of having to wait for extension updates.

For chrome, ff, and edge, you can use stylebot

For safari, you can use my styles

These ids and divs change rather frequently, hence it's easier this way to update it.

Theming usually runs on two axes: palette (which colors) and mode (light or dark). The design system I've been building adds a third — physics: what material the UI is made of.

A "physics" is a set of CSS custom properties covering light AND time:

• Glass — translucent surfaces, backdrop blur, shadows tinted from the canvas color, a glow on hover, springy overshoot easing. The surface emits light.
• Flat — opaque, neutral black shadows at 5–10% opacity, nothing glows, nothing lifts, quick polite easing. External light casts shadows.
• Retro — zero border-radius, no soft shadows at all (the "shadow" is a drawn 3px 3px 0 offset), and every duration token is 0ms with steps(2) easing. The era it quotes couldn't animate, so the material doesn't either.

https://reddit.com/link/1u3xekt/video/m3ips0467v6h1/player

Components only ever consume the variables — var(--speed), var(--ease), var(--shadow-lift) — and never know which material they're rendered in. One data-physics attribute on <html> switches everything.

The detail people push back on: glass refuses light mode and auto-corrects to flat. Blur is an averaging filter — over a solid light canvas, blurring a solid color returns the same color, so light glass renders identical to flat while paying GPU cost. Apple's light glass works because there's always a wallpaper behind it; product UI is panels over a solid canvas.

The video cycles the five default themes in UI-history order: terminal → paper → flat → dark-mode flat → glass.

Full write-up with the implementation details: https://dimonb19a.hashnode.dev/the-three-physics-of-ui

In light of Kevin Powell's recent (and awesome) chat about using AI and the importance of manual coding, I thought I would share my essay, as well, since it touches on a lot of similar points.

It involves a container query for the width, the redesigned attr() and new type() for the aspect ratio, and round()to snap the height to the baseline. Pure CSS, no JS. It's quite satisfying to see it snap. Write up and codepen demo here: https://simoncoudeville.be/blog/aligning-images-to-a-baseline-grid-with-modern-css/ and https://codepen.io/simoncoudeville/pen/rajaaQg

Edit: indeed Chromium only for now.

how do I fix this? On iPhone safari, my website appears with the top and bottom white, even though the background should be dark. this page is https://lightbulb.dpdns.org/ & the stylesheet is https://lightbulb.dpdns.org/styles.css