Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
pattern

6 Articles
{
,

}
Image
Direct link to the article Background Patterns, Simplified by Conic Gradients
conic gradients CSS gradients pattern patterns

Background Patterns, Simplified by Conic Gradients

For those who have missed the big news, Firefox now supports conic gradients!

Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true…

Image
Ana Tudor on May 28, 2020
Image
Direct link to the article How We Created a Static Site That Generates Tartan Patterns in SVG
gatsby pattern react SVG

How We Created a Static Site That Generates Tartan Patterns in SVG

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan patterns (as SVG and PNG files), taking care to filter out any that have explicit usage restrictions.

The …

Image
Paulina Hetman on Mar 4, 2020
Image
Direct link to the article Unicode Patterns
pattern unicode

Unicode Patterns

These Unicode patterns by Yuan Chuan are extraordinarily clever. It’s a <css-doodle> custom web component that sets up a CSS grid and randomizes what character to drop into a cell and things, like color.

See all their gorgeous work on …

Image
Chris Coyier on May 18, 2018
Image
Direct link to the article Simple Patterns for Separation (Better Than Color Alone)
accessibility pattern SVG

Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where …

Image
Chris Coyier on Nov 18, 2017
Image
Direct link to the article SVG Patterns
pattern SVG svg pattern

SVG Patterns

The SVG <pattern> element allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like:

  • Define a <pattern> inside of the SVG
  • Define the shapes
…
Image
Geoff Graham on May 3, 2017 Updated on Dec 15, 2020
Image
Direct link to the article Hero Patterns
background pattern SVG

Hero Patterns

A project by Steve Schoger:

A collection of repeatable SVG background patterns for you to use on your digital projects.

Customizeable patterns. You can even snag the path data for your own deeds.…

Image
Chris Coyier on Jan 25, 2017

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement