{"id":333052,"date":"2021-02-01T07:34:26","date_gmt":"2021-02-01T15:34:26","guid":{"rendered":"https:\/\/css-tricks.com\/?p=333052"},"modified":"2021-02-01T07:34:29","modified_gmt":"2021-02-01T15:34:29","slug":"no-jank-css-stripes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/no-jank-css-stripes\/","title":{"rendered":"No-Jank CSS Stripes"},"content":{"rendered":"\n
My mind goes immediately to repeating-linear-gradient<\/a><\/code> and hard-stop gradients<\/a> when thinking of creating stripes in CSS<\/a>. You make one stripe by using the same color between two color stops, and another stripe (or more) but using a different color between two colors stops (sharing the one in the middle). <\/p>\n\n\n\n\n\n\n\n
background: repeating-linear-gradient(\n  45deg,\n  black,\n  black 10px,\n  #444 10px,\n  #444 11px\n);<\/code><\/pre>\n\n\n\nThat will make angled dark gray stripes 10px apart on black. <\/p>\n\n\n\n
But this is how it renders on my screen:<\/p>\n\n\n\n<\/figure>\n\n\n\nCan you see that rendering jankiness where one or two of the stripes seems lighter and thinner than the others? I have no idea why. I assume it’s something to do with sub-pixel rendering or the like. This is not hard to replicate. It’s not just these two colors or this particular angle is just about any stripes created at all with repeating-linear-gradient<\/code>. It stops being so noticeable with thicker stripes though (say, 5px<\/code> and thicker). <\/p>\n\n\n\nI made a handful of examples.<\/a> This one with tighter stripes going the other way is especially prevelant:<\/p>\n\n\n\n
<\/figure>\n\n\n\nI needed to do this the other day, found the jankiness, and remembered this little note<\/a> in our stripes article. It amounts to: don’t use repeating-linear-gradient<\/code>. Just use linear-gradient<\/code>, set a background-size<\/code> and let it repeat. Indeed, that seems to do the trick. The trouble with this is… how big do you make the background-size<\/code>? If the stripes are vertical or horizontal, it’s fairly easy to smudge something. But if the stripes are at an angle… calculating the perfect width\u00d7height is tricky. I’d guess it’s related to the Pythagorean theorem, but I’m out of my depth there. <\/p>\n\n\n
So, what do you do?<\/h3>\n\n\nUse this nice little generator tool<\/a> thing:<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nIt does whatever fancy math necessary to get it right. You can see the unminified JavaScript here<\/a>. Search for \/ GET BACKGROUND SIZE \/<\/code> to see all the math going on. Whatever it’s doing there, the stripes come out perfectly. <\/p>\n\n\n\n
Kind of a shame repeating-linear-gradient<\/code> doesn’t have better visual output as that’s so much easier to reason about, but hey, you gotta do what you gotta do. <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe […]<\/p>\n","protected":false},"author":3,"featured_media":333310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1027,1201],"class_list":["post-333052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-gradients","tag-repeating-gradient"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/stripes.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":167022,"url":"https:\/\/css-tricks.com\/stripes-css\/","url_meta":{"origin":333052,"position":0},"title":"Stripes in CSS","author":"Chris Coyier","date":"April 4, 2014","format":false,"excerpt":"Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeating-linear-gradient(): background: repeating-linear-gradient( 45deg, #606dbc,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":208775,"url":"https:\/\/css-tricks.com\/why-do-we-have-repeating-linear-gradient-anyway\/","url_meta":{"origin":333052,"position":1},"title":"Why Do We Have `repeating-linear-gradient` Anyway?","author":"Ana Tudor","date":"September 29, 2015","format":false,"excerpt":"It all started with this question Keith Clark recently asked on twitter. CSS repeating-linear-gradients, do we need these? Can't the same thing be achieved with a linear-gradient and background-size? That's a good question. Their cousin, repeating radial gradients, definitely come in handy. They have saved me from having to write\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325490,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/","url_meta":{"origin":333052,"position":2},"title":"CSS Gradients Guide","author":"Geoff Graham","date":"November 16, 2020","format":false,"excerpt":"Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as well. Using CSS gradients is better for control and performance than using an actual image (of a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":373167,"url":"https:\/\/css-tricks.com\/css-checkerboard-background-but-with-rounded-corners-and-hover-styles\/","url_meta":{"origin":333052,"position":3},"title":"CSS Checkerboard Background… But With Rounded Corners and Hover Styles","author":"Preethi","date":"September 20, 2022","format":false,"excerpt":"On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns. At least that\u2019s what I thought while staring at the checkered background on my screen and trying to round\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":302426,"url":"https:\/\/css-tricks.com\/while-you-werent-looking-css-gradients-got-better\/","url_meta":{"origin":333052,"position":4},"title":"While You Weren’t Looking, CSS Gradients Got Better","author":"Ana Tudor","date":"February 14, 2020","format":false,"excerpt":"One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item: Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with the same color) Surprisingly, I recently discovered most people aren't\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":357109,"url":"https:\/\/css-tricks.com\/diagonal-stripes-wipe-animation\/","url_meta":{"origin":333052,"position":5},"title":"Diagonal Stripes Wipe Animation","author":"Chris Coyier","date":"November 30, 2021","format":false,"excerpt":"I was playing this game on Apple Arcade the other day called wurdweb. It's a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don't do anything) give it a lot of character. I kinda want little shape dudes that walk around\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-24-at-9.07.06-AM.png?fit=1200%2C599&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-24-at-9.07.06-AM.png?fit=1200%2C599&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-24-at-9.07.06-AM.png?fit=1200%2C599&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-24-at-9.07.06-AM.png?fit=1200%2C599&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-24-at-9.07.06-AM.png?fit=1200%2C599&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=333052"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333052\/revisions"}],"predecessor-version":[{"id":333309,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333052\/revisions\/333309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/333310"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=333052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=333052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=333052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}