Skip to main content

30 Days of CSS Gradients

A challenge to design CSS backgrounds with gradients for 30 days

A new CSS background for 30 days.

Some goals:

// 2021-12-04

30. fin dark blue and purple background with soft white glow on opposite corners

// 2021-12-03

29. cube city view from underneath two windowless cube buildings, one brown and white on the left and one black and white on the right, against a clear blue sky

// 2021-12-03

28. origami folded triangle patterns into paper with hues of soft white, cream, and beige

// 2021-12-03

27. elf stocking red background with soft white chainlink motif

// 2021-12-01

26. choreography bold shades of green through the middle, black and white stripes at the top left corner, and bright red ball at the bottom right corner

// 2021-11-30

25. umbrella view looking up inside an umbrella with orange, yellow, and white panels

// 2021-11-29

24. nightlight a square wall nightlight glowing on a dark, purple wall

// 2021-11-28

23. triangle a modern and playful triangular prism set asymmetrically, points just out of view, over a pastel blue background

// 2021-11-28

22. stars again an even pattern of blue stars on a dark indigo sky

// 2021-11-28

21. oranges orange glow behind a thin red lattice netting

// 2021-11-27

20. tree geometric evergreen tree in holiday green

// 2021-11-25

19. hexagon a pattern of hexagons and rhombuses in cheerful light yellows

// 2021-11-23

18b. cornsweet visual illusion using a thin gradient to make one side appear darker, placing a pencil or pen over the gradient cancels the effect

// 2021-11-23

18a. hering visual illusion created by lines like bicycle spokes with two blue lines placed near the center vertically that appear bowed

// 2021-11-22

17. ehrenstein again* visual illusion created by a small grid of non-intersecting lines with a radial gradient to break the illusion: no black circles at the intersection points

// 2021-11-21

16. cafe wall visual illusion created by parallel rows of black and white tiles slightly misaligned vertically, creating an off-balance effect on the rows

// 2021-11-20

15. ehrenstein* visual illusion created by a high-contrast grid with gaps at the intersection points

// 2021-11-19

14. stripes diagonal light blue lines with a shadow on each side

// 2021-11-18

13. streak green stripes similar to GitHub contribution streak graph

// 2021-11-17

12. work shirt blue teal and white plaid pattern

// 2021-11-16

11. looney telescoping red ripples from Looney Tunes introduction

// 2021-11-16

10. mosaic light teal tesalation of a circular floral design with rounded diamonds between

// 2021-11-14

9. lime colorful cross-sections of limes on a bright pink background

// 2021-11-13

8. cubes an illusion of neatly arranged sunset orange cubes or dodecahedrons

// 2021-11-11

7. clouds dark indigo-blue ripples

// 2021-11-10

6. bowl peering into the shadow of a cold, deep purple bowl

// 2021-11-09

5. peas green peas evenly spaced on a pea green background

// 2021-11-08

4. sunshine wiggly glowing yellow lines on a light blue background

// 2021-11-07

3. stars and stripe white stars on a bold blue background with a red stripe through the middle

// 2021-11-06

2. graph paper white paper with light blue graph grid

// 2021-11-05

1. boba tea purple tapioca pearls in classic black milk tea

Notes and attribution

cube city: Inspired by photo by Bernard Hermant on Unsplash.

choreography: Inspired by photo by Malena Gonzalez Serena on Unsplash.

ehrenstein: Designs credited to Visual Illusions by James Kingston, published by TAJ Books International LLP in 2011.

ehrenstein again: Revisiting the construction of the Ehrenstein illusion. The visual illusion example sets the illusion over a faint radial background to show the reader it’s the mind, not eye, that sees the black (or white) circle. Unrelated while researching how to produce the design with CSS only, Jon Kantner explained short-hand background in a way that applies size, position, and repeat per image in a way that never clicked when I read the MDN reference docs: https://css-tricks.com/drawing-images-with-css-gradients/.

.card {
	background:
		<image> <position> / <size> <repeat>,
		<image> <position> / <size> <repeat>,
		<base-color>;
}

I settled on inline SVG to draw the illusion thanks to an article by Chris Coyier: https://css-tricks.com/lodge/svg/09-svg-data-uris/.

.card {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Ana Tudor is masterful with CSS and gradients: