Lmst
Login

#cssPattern

Ana Tudor 🐯anatudor
2025-05-25

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

A bunch of variations on the pure CSS technique detailed in this article frontendmasters.com/blog/pure-

19 cards, each with a different kind of halftone pattern.
Ana Tudor 🐯anatudor
2025-05-10

A cool little pure background on @codepen codepen.io/thebabydino/pen/Yzv

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

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.
Ana Tudor 🐯anatudor
2025-05-01

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 stackoverflow.com/a/65129916/1 to make it the top answer and get more people (and AI*) to use modern, well supported

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

html { background: repeating-conic-gradient(#808080 0% 25%, #0000 0% 50%) 50% / 20px 20px }
Ana Tudor 🐯anatudor
2025-04-11

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
codepen.io/thebabydino/pen/vYy

.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 }Up arrow card patterns.More up arrow card patterns.
Ana Tudor 🐯anatudor
2025-04-09

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

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

See it on @codepen codepen.io/thebabydino/pen/ZEG

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.
Ana Tudor 🐯anatudor
2025-03-19

Minimal pure textile patterns on @codepen codepen.io/thebabydino/full/OJ

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!

Some of the patterns in the gallery.Some more of the patterns in the gallery.
Ana Tudor 🐯anatudor
2024-12-18

Really cool to see people linking my Frontend Masters article as a resource frontendmasters.com/blog/pure-

Screenshot of a reddit post asking how to achieve a halftone effect and the top two answers suggesting my article.
Ana Tudor 🐯anatudor
2024-12-04

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

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

Ana Tudor 🐯anatudor
2024-11-25

Anyway, health and administrative issues aside... I've been cooking something cool when it comes to 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.

codepen.io/thebabydino/pen/MWN

Screenshot of my linked demo being featured in this week's CodePen Spark.
Ana Tudor 🐯anatudor
2024-11-13

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 reddit.com/r/css/comments/1gp4

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

Ana Tudor 🐯anatudor
2024-11-12

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 codepen.io/thebabydino/pen/RwX

Ana Tudor 🐯anatudor
2024-11-05

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

codepen.io/thebabydino/pen/QWe

Checkerboard pattern at 45° with a slight 3D look.
Ana Tudor 🐯anatudor
2024-11-02

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

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

Masking method (allows transparency) codepen.io/thebabydino/pen/pYr

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

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.
Ana Tudor 🐯anatudor
2024-10-17

The fifth is a pure text effect.

codepen.io/thebabydino/pen/XWQ

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 🪲 bugzilla.mozilla.org/show_bug.

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.
Ana Tudor 🐯anatudor
2024-09-27

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 css-tricks.com/background-patt

/* ❌ 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 }
Ana Tudor 🐯anatudor
2024-09-11

Something else that might be useful is this article on how `conic-gradient()` can be used to simplify patterns css-tricks.com/background-patt

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

Ana Tudor 🐯anatudor
2024-09-11

If you're interested in checking out a lot of other modern and compact patterns, you can find them under the tag in my @codepen profile

codepen.io/thebabydino/pens/ta

A grid of 6 CSS pattern demos under the #css-patterns tag in my CodePen profile.A grid of 6 CSS pattern demos under the #css-patterns tag in my CodePen profile.A grid of 6 CSS pattern demos under the #css-patterns tag in my CodePen profile.A grid of 6 CSS pattern demos under the #css-patterns tag in my CodePen profile.
Ana Tudor 🐯anatudor
2024-09-11

So this very subtle pure pattern got picked on @codepen codepen.io/thebabydino/pen/vYq

¯\_(ツ)_/¯

(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)

Pattern of horizontal, vertical and diagonal lines. Very subtle, light grey lines on white.
Ana Tudor 🐯anatudor
2024-09-11

A ✨ fun ✨ little thing I came across online and thought I could pure , so here it is on @codepen codepen.io/thebabydino/pen/WNP

The aim was to keep it just pure CSS, but if I ever want to also reproduce the subtle texture from the inspiration image, then SVG filters are on the menu too.

Circles with paper-like, colourful patterns inside.
Ana Tudor 🐯anatudor
2024-06-19

Use case for CSS mathematical functions.

`round()` edition: size box so that it contains the background pattern size an integer number of times plus half codepen.io/thebabydino/pen/yLW

Relevant CSS: ``` // background pattern size $s: 1em; div { /* make box width contain background-size * an integer number of times plus half */ width: calc(round(50vmin, #{$s}) - #{.5*$s}); /* make box square */ aspect-ratio: 1; /* border width a multiple of * half the background-size */ border: solid 1.5*$s transparent; /* background pattern */ background: repeating-conic-gradient( #000 0% 25%, #0000 0% 50%) 0 0/ #{$s $s}; /* mask out everything but the border area */ mask: linear-gradient(red 0 0) exclude, linear-gradient(red 0 0) padding-box } ```From MDN: Syntax width: round(var(--width), 50px); width: round(up, 101px, var(--interval)); width: round(down, var(--height), var(--interval)); margin: round(to-zero, -105px, 10px); Parameter The round(<rounding-strategy>, valueToRound, roundingInterval) function specifies an optional rounding strategy, a value (or mathematical expression) to be rounded and a rounding interval (or mathematical expression). The valueToRound is rounded according to the rounding strategy, to the nearest integer multiple of roundingInterval.

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst