Skip to main content

mastodon - Link to source

Hey all CSS wizards. I need your help.

I would love this bg pattern to be squares instead of little circles (radial-gradient). Is that even possible using pure CSS?

codepen.io/pawelgrzybek/pen/OP…

I have seen that on the ATProto website, but they use SVG for it.
atproto.com

@kevinpowell @css @bramus @chriscoyier 🙏

#css


AT Protocol

AT Protocol
#css @Chris Coyier @CSS by T. Afif @Bramus @Kevin Powell
in reply to Bramus

Paweł Grzybek
mastodon - Link to source
Paweł Grzybek
• •

Hey, thanks. This is not exactly what I'm after. I would like a little 2px × 2px square, inside bigger background-size that is 1lh × 1lh.

Look at the ATProto website, this is a good example.

CSS pattern with a little squares inside it. This is the example from the ATProto website, but they use SVG for it, not a CSS.
in reply to Chris Coyier

Paweł Grzybek
mastodon - Link to source
Paweł Grzybek
• •

Hey Chris, thanks a ton! Your solution works great probably for most cases, love it!

It is not going to work if you would like your background to be transparent. @css and @Meyerweb suggested this solution.

codepen.io/pawelgrzybek/pen/Kw…

Worse browsers support because of the conic gradient, but allows to use transparent background.

Thanks so much anyway and have a fab weekend 🤗

Ps. Love new CodePen 2.0

@Eric A. Meyer @CSS by T. Afif
⇧