DEV Community

Cover image for Super Useful CSS Resources 🌈
Alicia Sykes
Alicia Sykes

Posted on • Updated on

Super Useful CSS Resources 🌈

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.

Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials)

Contents

Property Generators

1. Neumorphism

Generate Soft-UI CSS styles using inset shadows, by @adamgiebl

screenshot

2. Shaddows Brumm

Make and preview beautifully smooth shadows, by @brumm

screenshot

3. Fancy Border Radius

Generate cool shaped objects with border-radius, by @9Elements. Similar to BlobMaker

screenshot

4. Glow Generator

Generate pure CSS, cross-browser glow effects

screenshot

5. Clothoid Corners

Generates clothoid rounded corners by CSS clip-path, by Takehiko Ono

screenshot

6. Glassmorphism

Build semi-transparent, blurred glass-like backgrounds. Similar to ui.glass/generator

screenshot

7. Clipy

Generate complex shaped objects using clip-path, by @bennettfeely

screenshot

8. CSS Filters

Generate and preview pure CSS Instagram-style photo filters, by @ghosh

screenshot

9. Base64 Image

Encode an image directly in your CSS in Base64

screenshot

10. Quantity Queries

Generate quantity-based CSS queries, by @drewminns

screenshot


Animations

11. Animista

CSS animation playground and generator, by Ana T

screenshot

12. Cubic-Bezier

Preview and generate advanced cubic bezier animations, by @LeaVerou

screenshot

13. Keyframes

Advanced keyframe animation maker, by @mitchas

screenshot

14. Wait Animate

Use animation-delay to simulate delays, by @will-stone

screenshot

15. Transition.Style

Copy-paste transition animations, by @argyleink

screenshot


Backgrounds

16. Hero Patterns

Find and customize simple pure-CSS patterned backgrounds, by @steveschoger

screenshot

17. Haikei

Generate unique organic SVG banners and backgrounds (similar to Shape Divider)

screenshot

18. Pattern Generator

Advanced pattern generator

screenshot

19. CSS Pattern

Collection of pre-made pure CSS patterned backgrounds, by @Afif13

screenshot

20. Patternizer

Build striped backgrounds, by @matthewlein

screenshot

21. Patternify

Build your own old-school pattern, by @SachaGreif

screenshot

22. Animated BG

Generate blurred animated pure CSS backgrounds, by @Vincenius

screenshot

23. Trianglify

Geometric background designer (note: only semmi-free), by @qrohlf

screenshot

24. Animated Backgrounds

Collection of pure CSS background animations

screenshot

25. Magic Pattern CSS Backgrounds

Collection of reusable SVG-based / pure CSS background patterns, with a visual explorer

screenshot


Colors

26. CSS Gradient

Advanced CSS gradient builder

screenshot

27. Parametric Mixer

Equaliser-based CSS color composer. by @dawidwoldu

screenshot

28. Palettte.

Develop and tweak color schemes

screenshot

29. Paletton

Palette builder using opposing or attracting colors

screenshot

30. Grabient

Sample gradients.
Similar to CoolHue, WebGradients.com, GradientHunt, GradientButtons and UI gradients

screenshot

31. Color Hunt

Yet another color palette designer

screenshot

32. Easing Gradients

Cubic-bezier style pure CSS gradients, by @larsenwork

screenshot

33. Flat UI Colors

Flat-style handpicked color palettes, by @ahmetsulek

screenshot

34. Color Tools

Mix, extract, convert and generate colors

screenshot

35. ColorPalettes.Earth

Natural color pallets from nature

screenshot


Typography

36. Font Joy

Discover and preview various font pairings, by @Jack000

screenshot

37. Type set With Me

Typography & legibility sandbox, by @tsmith512

screenshot

38. Type Scale

Generate heading/ body font sizes, by @jeremychurch

screenshot

39. Glyphter

Create icon fonts from SVG graphics

screenshot

40. Font-Library

Tagged library of Google Fonts, by @katydecorah

screenshot

41. Glitter

Export 90s-style Glitter text

screenshot


Loaders

42. Spin Kit

Selection of clean CSS loading animations

screenshot

43. Whirl

100+ CSS loading animations, for copy-paste

screenshot

44. Loader Generator

Pre-built and custom pure CSS loaders

screenshot

45. lukehaas - CSS-Loaders

Simple pure CSS loading animations

screenshot

46. CSSLoaders

Complex pure CSS loaders

47. loading.io/css

CSS implementations of common loaders


Layouts

48. CSS Grid Garden

Interactive game for learning CSS grid, by @thomaspark

screenshot

49. FlexboxFroggy

Interactive game for learning flexbox, by @thomaspark

screenshot

50. Flexplorer

Visual flexbox demo, by @bennettfeely

screenshot

51. Flexulator

An interactive CSS Flexbox space distribution calculator, by @telagraphic

screenshot

52. Grid Generator

Make grids using the CSS grid-template properties, by @sdras (similar to grid.layoutit.com)

screenshot

53. Layout Generator

A modern CSS layout maker

screenshot

54. Box Model Diagram

Just a visual box model demo

screenshot


Informative

55. CSS Timeline

A history of CSS

screenshot

56. Screen Size Map

View popular screen sizes for responsive design

screenshot

57. CSS Ruler

Preview various CSS units relative to each other

screenshot

58. bada55

List of very funny CSS hex color codes
See also, colors.lol for some overly-descriptive color pallets

screenshot

59. Who can use?

Checks accessibility grade of a given color combinations, similar to Colorable

screenshot

60. Can I use?

Browser compatibility check of various, CSS, JS, HTML and web features

screenshot

61. Can I email?

Similar to Can I use?, but checks if a given CSS property (or HTML elem) is compatible with email clients

screenshot

62. CSS Processing Tools

Convert to and from any other CSS language

screenshot

63. Unused CSS

Searches your site for unused CSS, and displays stats

screenshot

64. Component.Gallery

Global component search

screenshot

65. Design System Gallery

A collection of open design systems, for inspiration

66. Checklist.design

A collection of design best practices organised as checklists

67. Glyphs

A list of CSS glyph character codes (see also GlyphSearch for library icons)

68. CSS-Tricks.com

The best CSS blog out there

69. Curated Design Tools

A curated list of awesome design tools

70. Awesome-CSS-Frameworks

A list of open source CSS frameworks

71. CSS Reference

A visual guide to CSS properties (similar to htmlreference.io)

72. MDN CSS Docs

Excellent documentation of all available CSS properties

If you like this kind of stuff,
consider following for more :)
Follow Lissy93 on GitHubFollow Lissy_Sykes on Twitter

Top comments (118)

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

Holy crap I'm starting to think you're magic. Between this and the dev tools article I've got some good references!

Collapse
 
lissy93 profile image
Alicia Sykes

Thanks Steve :) 💖

Collapse
 
wesborland profile image
Marcos Javier Gómez Hollger

Ohhh... Thanks Alicia for this... its very usseful! :)

Collapse
 
mariamarsh profile image
Maria 🍦 Marshmallow

This is an amazing list, and I'm sure it will make life easier for many front-end developers.
Which of these resources do you use the most?
Looking forward to similar posts for other IT areas 🥰

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo

Thanks for sharing Alicia

Collapse
 
spectrasonic profile image
Manuel Heredia

Thank you very much for this contribution, it is very complete.

Collapse
 
d7460n profile image
D7460N

This is a treasure trove! Thank you so much!

Collapse
 
myrddral profile image
Attila Béli

Top list, super easy to pick the right tool browsing the demo animations! Cheers!

Collapse
 
itsmestevieg profile image
Stevie G

Fantastic List you have compiled Alicia. Thanks so much for sharing

Collapse
 
santhoshvr97 profile image
Santhosh VR

Thanks for this useful resource and you saved a lot of time with this.. I am really love this page ❤

Collapse
 
vincenius profile image
Vincent Will

Great collection Alicia! Thanks for including my animated BG generator (#22)

Collapse
 
lissy93 profile image
Alicia Sykes

It's cool tool you've built :)
I've updated the post to also include a link to your GitHub - sorry, not sure why I missed that before

Collapse
 
svenni profile image
svenniuwe

Thanks!!!

Collapse
 
websilvercraft profile image
websilvercraft • Edited

I'm working on my own gradient generator on blank html, CSS Gradient Generator. I've was playing with gradients in css and I decided to build it as a simple tool to be able to create visually complex gradients with more colors(when using 3 color with radial gradient looks amazing).

Collapse
 
weedshaker profile image
weedshaker

Great Stuff!
I tried the CSS Grid Generator and even though my own grid layout implementation is not as beautiful, I guess you would certainly include this: weedshaker.github.io/cssGridLayout/ since it is far easier to use and the grid size is dynamic at drag and drop.

Collapse
 
amircahyadi profile image
Amir-cahyadi

Thanks for sharring 👍❤️

Collapse
 
anjapetry profile image
Anja Petry

You're a godsend, thank you :) Love CSS, love your list!

I'd like to add some personal favourites here (my apologies if there are any duplicates):