Lmst

#cssPattern

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

A #contenteditable #3D text effect on @codepen https://codepen.io/thebabydino/pen/PogJybr

No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨

PS re: "trashed panda" 🦝🍾🥂🤪
https://www.bbc.com/news/articles/c5y2271q20lo

#svgFilter #cssGradient #code #coding #cssPattern #extrude #extrusion #frontend #web #dev #webDev #webDevelopment #textEffect #textEffects

Ubuntu was assaulting me with some errors I couldn't figure out, so I uninstalled and installed some stuff again and some settings got lost.

So I got hit with an abomination produced by Search Assist when I looked up my article to reference it in the description of a CodePen demo.

#CSS #AI #code #coding #frontend #cssGradient #halftone #imageEffect #web #dev #webDev #webDevelopment #cssPattern #aiSlop

My feedback:

This code does not create a halftone effect. It just produces concentric circles, not a halftone effect. Source: I'm the one who came up with the technique in the article it references and I wrote the first article listed in the search results. The whole response is complete bullshit.

A fun simple little pure #CSS demo on @codepen: bubbles pattern https://codepen.io/thebabydino/pen/dyeZVNO

#cssGradient #cssMask #cssPattern #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment

Bubbles pattern screenshot. Shows golden, magenta and purple gradient bubbles with shadows over a blue background.

8️⃣ 736 ♥️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv

A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#cssPattern #cssPatterns #cssGradient #halftonePattern #frontend #coding #web #dev #webDev #webDevelopment #code

19 cards, each with a different kind of halftone pattern.

A cool little pure #CSS background #pattern on @codepen https://codepen.io/thebabydino/pen/YzvYqWL

Can you figure out how it was made before checking the code? 😼

#cssPattern #frontend #code #coding #web #dev #webDev #webDevelopment #cssGradient #cssPatterns

Geometric pattern, where we have a xor effect at the intersection of two grids of plane packing circles, offset by a radius in both directions. This then gets xored with a diagonal checkerboard with the grid nodes where the circles are tangent to other circles on the same grid.

Want a checkerboard pattern? No need to use multiple `linear-gradient()` layers anymore. `conic-gradient()` has been supported cross-browser since 2020!

PS: if you can, upvote https://stackoverflow.com/a/65129916/1397351 to make it the top answer and get more people (and AI*) to use modern, well supported #CSS

*people will use it anyway and we don't need more outdated code out there

#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #cssPattern

html {
background:
repeating-conic-gradient(#808080 0% 25%, #0000 0% 50%)
50% / 20px 20px
}

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER

#CSS #blending #blendMode #pattern #cssGradient #coding #frontend #code #web #dev #webDev #webDevelopment #cssPattern #cssPatterns #patterns

.card {
--s: rgb(0 0 0/ .2) 0, #0000 5px 50px;
background:
/* shadows */
repeating-linear-gradient(45deg, var(--s)),
repeating-linear-gradient(-45deg, var(--s)),
/* main pattern */
repeating-linear-gradient(45deg, var(--c)),
repeating-linear-gradient(-45deg, var(--c));
background-blend-mode:
multiply, multiply, lighten
}

.card:nth-child(1) {
--c: #847971 0 10px, #938981 0 20px,
#9e938a 0 30px, #a89c93 0 40px, #bfb6ab 0 50px
}

.card:nth-child(2) {
--c: #333 0 10px, #555 0 20px,
#c55 0 30px, #ccc 0 40px, #eee 0 50px
}

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

Screenshot of linked demo. Shows 7 beveled cards, some with borders (solid, gradient or patterned ones), some with (semi)transparent backgrounds, some with gradient backgrounds, one with an image background. They are all on top of an image backdrop.

Minimal pure #CSS textile patterns on @codepen https://codepen.io/thebabydino/full/OJmpzya

Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!

#pattern #cssPattern #frontend #patterns #cssPatterns #cssGradient #coding #web #dev #webDev #webDevelopment #textile #code

Some more of the patterns in the gallery.

Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#CSS #code #coding #frontend #pattern #cssPattern #cssGradient #halftone #web #dev #webDev #webDevelopment #filter #cssFilter #blendMode #blending

Screenshot of a reddit post asking how to achieve a halftone effect and the top two answers suggesting my article.

I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.

#CSS #pattern #gradient #halftone #cssPattern #cssGradient #filter #blending #blendMode #code #coding #frontend #web #dev #webDev #webDevelopment

Anyway, health and administrative issues aside... I've been cooking something cool when it comes to #CSS and you'll get to see it soon!

For now, here's a little demo I made that unexpectedly was one of the @codepen picks last week and now even made this week's Spark.

https://codepen.io/thebabydino/pen/MWNMjGO

#filter #cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment #halftone #cssPattern

Screenshot of my linked demo being featured in this week's CodePen Spark.

We make the background-size fit an integer number of times within the viewport width and height.

We need length division for that, so we use the tan(atan2()) hack by @JaneOri.

Then, we set box dimensions/ margins to be multiples of background-size https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/

Really cool thing is it works well on zoom, see it on @codepen
https://codepen.io/thebabydino/pen/ZEgwBqL

#CSS #Maths #mathematics #cssMaths #cssPattern #pattern #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssHack

#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ

#CSS #pattern #gradient #cssPattern #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

Here's a quick and compact (200 bytes) pure #CSS raised checkerboard background pattern on @codepen:

https://codepen.io/thebabydino/pen/QWeVjKJ?editors=0100

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #gradient #cssPattern

Checkerboard pattern at 45° with a slight 3D look.

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev

Screenshot of elements with solid gradient backgrounds and heart, weave, cicada and star patterns for borders.

Screenshot of elements with transparent backgrounds and heart, weave, cicada and star patterns for borders.

The fifth is a pure #CSS text effect.

https://codepen.io/thebabydino/pen/XWQQRWG

No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.

Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue

Shows the text "dreams" in narrow all caps on top of a leaves under blue light background. This text has a split line along the main diagonal. To the bottom left of this split line, the text is filled (white) and has no background. To the top right of this split line, the text is just stroked (white) with no fill and has a medium blue stripes horizontal background.

Because I just saw a checkerboard pattern done with 4 CSS gradients: you don't need to overcomplicate! 🏁

A single conic gradient does it! ✨

Detailed explanation of the how behind this + other patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

#tinyCSStip #CSS #cssPattern #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

/* ❌ DON'T ❌ */
.checkerboard {
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
}

/* ✅ DO ✅ */
.checkerboard {
background:
repeating-conic-gradient(#fff 0% 25%, #ccc 0% 50%)
0 0/ 20px 20px
}

Something else that might be useful is this article on how `conic-gradient()` can be used to simplify #CSS patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

With illustrations and demos like this one showing how to go from a normal checkerboard pattern to a diagonal one.

#cssPattern #cssGradient #pattern #gradient #code #coding #frontend #web #dev #webDev #webDevelopment

Client Info

Server: https://mastodon.social

Version: 2025.07

Repository: https://github.com/cyevgeniy/lmst