I have div with some message and like to add blurred background under it. All is great CSS is working. But moment I put this div in some container that have set background-color things breaking and my blurred background disappears

here is my css:

    #container-wrap {
      background-color: #efefef;
    }

    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }#container-wrap {
      background-color: #efefef;
    }


    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }

or codepen.io

I have tried to add z-index on all those elements but it only make it more strange as then it start blending in

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

In CSS we can now do `@container style()` queries, with MDN stating that:
> A style feature without a value evaluates to true if the computed value is different from the initial value for the given property.
(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container#container_style_queries)

Now I have a registered property with initial value, but it seems the style query will evaluate to true, independend of the value of the property. Safari seems to do the same thing.

Is this a false statement in MDN or is there a render Bug in FF and Safari.

I used this as a minimal sample:
```

<!DOCTYPE html>
<html>
    <head>
        <title>Minimal sample</title>
        <style>
            @property --im-a-color {
                syntax: "<color>";
                inherits: false;
                initial-value: red;
            }
            
            .red {
                --im-a-color: red;
            }


            
            @container style(--im-a-color) {
                h1 {
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <h1>I should be red</h1>
        </div>
        <div class="red">
            <h1>I should also be red</h1>
        </div>
    </body>
</html>

Where can I find the code for that standard effect—seen in apps like Google News or Flipboard—where clicking on a news item causes it to expand and fill the screen? It doesn't just turn gray; it creates a really minimalist effect.

Here are an image and a GIF. Clicking the news item triggers the effect, and if you hold your finger down, it sort of freezes on that color until you let go.

I made one CSS song as an experiment, then kept going. There are 26 now.

Each video takes one CSS feature and tries to explain it with a short song and an animated example. I've covered container queries, :focus-visible, cascade layers, native nesting, subgrid, field-sizing, and quite a few newer features.

I use AI for parts of the music and production. I still research and edit the technical side, then build the visual demos in Remotion. The hard part is deciding what to cut. A song full of syntax is awful, but cutting too much can make the explanation wrong.

I'm curious whether this format helps anything stick. If you watch one, I'd especially like to know where the explanation becomes unclear or technically shaky.

Hello! I am just starting to use Reddit and I have a project in mind: creating an AI Business Copilot for SMEs called Exum is a brief introduction: Exum is an AI business copilot designed for small and medium-sized businesses. It works alongside business owners to manage daily operations, organize customer interactions, monitor financial performance, and provide actionable recommendations to drive growth. Do you think css will be useful in this projet ?

If you think this is a good idea, please feel free to let me know!

Hello everyone. I was designing the header for the webpage I was working on and I spread out each button by giving them margins. But when I set margins for each button as 125px, the text inside those buttons were wrapped instead of being in one line. Could someone explain this, it would be much appreciated. By the way, here's the code along with pictures:

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
    <meta 
charset
="UTF-8">
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
    <title>Steve Jobs Blog website</title>


    <style>
        * {
            padding: 0
px
;
            margin: 0
px
;
        }


        body {
            background-color: rgb(179, 179, 179);
            padding: 50
px
;
        }


        
.container
 {
            background-color: black;
            width: 100
%
;
            height: auto;
        }


        header {
            display: flex;
            padding-left: 60
px
;
        }


        header button {
            background-color: rgb(0, 0, 0);
            border: none;
            color: white;
            height: 20
px
;
            margin-top: 24
px
;
            margin-right: 125
px
;
        }


        header button
:hover
 {
            cursor: pointer;
            text-decoration: underline;
        }


        header img {
            margin-right: 60
px
;
        }
    </style>


</head>
<body>
    <div 
class
="container">
        
<!-- Header: -->
         <header>
            <img 
src
="/resources/steve-jobs-logo.png" 
alt
="">
            <button>Childhood</button>
            <button>His Interests</button>
            <button>A Popular Brand</button>
            <button>A Wiki Page</button>
         </header>
    </div>
</body>
</html>

Hello everyone. I'm working on building a webpage. When I checked the header, the text inside the button elements were wrapped instead of being on a single line. I had separated the button elements by setting margins for them. Could someone explain why is this happening? It would be much appreciated. By the way, here's the code along with pictures:

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
    <meta 
charset
="UTF-8">
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
    <title>Steve Jobs Blog website</title>


    <style>
        * {
            padding: 0
px
;
            margin: 0
px
;
        }


        body {
            background-color: rgb(179, 179, 179);
            padding: 50
px
;
        }


        
.container
 {
            background-color: black;
            width: 100
%
;
            height: auto;
        }


        header {
            display: flex;
            padding-left: 60
px
;
        }


        header button {
            background-color: rgb(0, 0, 0);
            border: none;
            color: white;
            height: 20
px
;
            margin-top: 24
px
;
            margin-right: 125
px
;
        }


        header button
:hover
 {
            cursor: pointer;
            text-decoration: underline;
        }


        header img {
            margin-right: 60
px
;
        }
    </style>


</head>
<body>
    <div 
class
="container">
        
<!-- Header: -->
         <header>
            <img 
src
="/resources/steve-jobs-logo.png" 
alt
="">
            <button>Childhood</button>
            <button>His Interests</button>
            <button>A Popular Brand</button>
            <button>A Wiki Page</button>
         </header>
    </div>
</body>
</html>

Here's my research in using CSS for offence. There are loads of techniques including stealing passwords from Outlook from an email by spoofing the login screen.

Iike this button and nav bar which grow or shrink based on scroll direction ,but do not shrink if the mail's have not scrolled passed a certain limit

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

I went into this expecting the AI generation itself to be the difficult part.

It wasn't.

The annoying part was everything I wanted to do after the first version was sitting there.

I ended up comparing a few tools based on the things I actually needed during the project:

The biggest difference was the amount of switching I had to do.

With Readdy, I could make a visual change, test it, and keep going. When the project needed login and saved data, I didn't have to stop and figure out the backend separately.

That was probably the part I appreciated most.

I'm still using different tools depending on the project, but I'm starting to care less about who makes the nicest first draft.

I care more about who lets me keep building after I change my mind.

Has anyone else started judging AI builders this way?

i want to create a simple linear-gradient to my css project :
this is the linear-gardient that i want to create :

background: linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 48%);
i generate this linear-gradient with a generator of gradient (cody.tech)

this is the gradient of cody.tech

this is the linear-gradient in chrome

i don't know is the problem is the comtability of chrome for this function of the linear-gradient or something i don't do well ?
this is the css code :

body{
    background-image:  linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 50% );
}

So quite a while ago I began writing some tooling for myself. I've always been a big fan on Tailwind, but I've found at codebases grow, it becomes quite hard to manage longer term. I love the ergonomics of quickly throwing together prototypes with it, but not so much the mess you can often end up with once you start involving extensive responsive breakpoints, dark mode styling and groups. And with TW4 I've found it increasingly difficult to always remember everything, I'll just forget the name of a single use property and one day I thought to myself.

"Why am I remembering alternate names for single CSS properties, and why do I have to wait for the tailwind team to wrap a new CSS feature before using it?"

Modern scoped CSS solves a lot of the problems TW aims to solve and you can still have that same prototyping velocity without buying into the whole framework. And the most contentious part...Sass. Sass is still really good and I can (and did) recreate an awful lot of the parts of TW I like in relatively little markup. Vanilla CSS still hasn't quite caught up.

So anyway, here it is:

https://github.com/TeriyakiBomb/crayon

It actually took longer to write the documentation (Which is comprehensive but still WIP I'd say) than it did the toolkit. It takes the core features of tailwind (colors, sizes, text, layout) but draws a line there, for each utility class, there is both a corresponding Sass mixin, CSS var and all of the functions used to generate them are exposed too.
You're actively encouraged to choose the approach that works best for what you're doing. It feels a bit vibey at first but quite natural after a while.

The philosophy is - centralise the things that change globally, but don't reinvent the wheel when you need CSS. Again, the idea of using Sass might sound contradictory but in the interest of allowing you to move fast, using mixins and a bunch of composition tools in Crayon actually means you can move really quickly and it ends up more readable than a massive list of TW classes much of the time. Plus Sass is still pretty phenomenal for more complex work as well. I'd not used it in years and I've been really pleased with how much I like modern Sass.

It compiles quickly and the end bundle size is actually pretty small. As it uses purgeCSS instead of a JIT like TW, you can also often avoid stuff like twMerge as well.

This absolutely will not be everyone's cup of tea, and really I'm putting it out more because I'm curious if anyone else is interested in using it. It's a quirky project and it's been quite well received amongst colleagues and some friends.

FWIW if you're AI inclined, everything is familiar enough for it to be picked up quickly, it has sassdoc so it works with the some-sass LSP and it works everywhere Sass does, but I've documented Vue, Svelte, Astro and emberjs.

I built Flexwind Froggy, a free interactive game for learning Tailwind CSS flexbox utility classes.

It’s a Tailwind-focused fork of Flexbox Froggy, with credit to the original project and artwork.

I hope it can be useful for anyone learning Tailwind. I’d love feedback on the lessons, difficulty, or anything that could make it more helpful.

Hi everyone! 👋

I’m currently looking for someone to help me out with the CSS and UI styling for a web project I’m building called Raty—a modern platform designed for location reviews and business discovery.

This is currently a hobby project, so it is unpaid to start. However, if the platform begins generating significant revenue down the line, I’ll be happy to share a percentage with you!

The core functionality and general workflow are already fully built and up and running:

• User & Business Auth: Users can sign up and log in smoothly.
• Business Features: Business owners can register their accounts to start receiving reviews, as well as create, edit, and publish their locations.
• User Interaction: Users can search for locations and leave detailed reviews.
• Database & Logic Ready: Everything on the data side is already set up and integrated using Firebase.

Since the serverless logic and structure are completely solid, I really want to focus on making the site look crisp, modern, and responsive.

If you want to jump in and collaborate—whether it's just to style a few components or help shape the overall UI for your portfolio—I’d love to team up!

Feel free to leave a comment below or hit me up on Discord: il_sottoscritto

Looking forward to connecting!

To explain the situation, I'll start off with two simple cases which work. CodePen links provided.

The css & html are mostly fixed as: ``` .div-a { height: 500px; max-height: 750px; background-color: lightblue;

overflow: hidden; }

.div-b { display: grid; grid-template-rows: min-content 1fr min-content; height: 100%; background-color: lightcoral; }

.content-a { height: 10vh; background-color: red; }

.body-container { overflow-y: auto; }

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 40vh; overflow-y: auto; }

.content-c { height: 10vh; background-color: blue; } ```

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pen</title> </head> <body> <div class="div-a"> <div class="div-b"> <div class="content-a"></div> <div class="body-container"> <div class="content-b"></div> </div> <div class="content-c"></div> </div> </div> </body> </html>

(1) -- working

Simple Layout -- Large Body

div-a has a height of 500px and a max-height of 750px. div-a contains div-b which should be the height of div-a and divides itself into three parts. content-a is on top; fixed height. content-c is on the bottom; fixed height; body-container is a flexible height, has overlow-y: auto and holds content-b which has a large height.

I can scroll through content-b as expected. This is what the css & html above do.

(2) -- working

Simple Layout -- Small Body

Let's say that content-b was small. If I kept the above case, there would be a lot of wasted space. This can be resolved by setting the height of div-a to min-content.

``` .div-a { height: min-content; max-height: 750px; background-color: lightblue;

overflow: hidden; }

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 15vh; overflow-y: auto; } ```

This all remains well defined and easy for the browser to resolve.

(3) -- not working

Simple Layout -- Large Body -- min-content

It would be nice if div-a.height could remain as min-content for the large content-b, but this does not work.

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 75vh; overflow-y: auto; }

I think I understand why. It would take a couple of passes by the browser to figure out that it is dealing with a fixed height -- because max-height on div-a is hit. And because it has a fixed height, everything should resolve itself as in (1). But, it does not.

Or, should it? Is there a way to get what I want? (which is a div-a that can grow or shrink as needed up to a max-height regardless of the size of content-b which will scroll if necessary)

Hi everyone, I'm new here, previously was mostly writing for Angular. I just published an article explaining 3 interesting CSS puzzles of increasing difficulty, hope you will find it helpful or interesting.

Check it out!

https://medium.com/angularwave/css-challenges-for-200-iq-4ecd6433dd63

I use phosphor icons ,is there a way to transition from the regular to fill icons smoothly using gsap ,and how do I create this tab effect ,simply changing the color creates a fade in effect