easy ways to add design flair, user delight, and whimsy to your product.
- https://color.adobe.com/create
- https://palettte.app/ (advanced tool; try importing the default paletttes)
- http://colours.neilorangepeel.com/category/red/
Color knowledge (not tools but still important so here they are)
MAKE SURE TO CHECK OUT https://components.ai
- https://twitter.com/JoshWComeau/status/1170358024319492097?s=20
- CSS Secrets https://twitter.com/swyx/status/982786353216843776?s=20
- Transparent fill SVG and color in on Hover - Codepen
- https://speckyboy.com/css-svg-canvas-masks/
- https://www.blobmaker.app/
- https://getwaves.io/
- text effects https://css-tricks.com/animate-blob-text-with-svg-text-clipping/
- animate an existing svg https://svgartista.net/
- https://leaverou.github.io/css3patterns/
- https://uigradients.com/#Petrichor
- https://coolbackgrounds.io/
- ANIMATED GRADIENTS https://www.gradient-animator.com/
- CSS Doodle https://css-doodle.com/
- this guy https://twitter.com/yuanchuan23
In particular, applying gradients and background images to text is super underrated. Examples:
- web components https://wc-spinners.cjennings.dev/
- Spinners https://tobiasahlin.com/spinkit/
- Buttons, hover, inputs, and loaders https://cssfx.dev
- Conic gradient loader in CSS - Codepen
- Buttons, hover, inputs, and loaders https://cssfx.dev
- general http://animista.net
- animate an existing svg https://svgartista.net/ (by the same people as animista)
- general https://daneden.github.io/animate.css/
- general https://ianlunn.github.io/Hover/
- Burgers https://march08.github.io/animated-burgers/
- Burgers http://negomi.github.io/react-burger-menu/
- Layout https://github.com/aholachek/react-flip-toolkit
- Hover and loaders: https://www.csswand.dev/
- https://iconmonstr.com/
- https://thenounproject.com/
- https://icomoon.io/
- https://orioniconlibrary.com/ has customizable colors and packs eg for ecommerce
- animated icons http://www.transformicons.com/builder.html
- https://undraw.co/
- https://www.humaaans.com/
- https://www.freepik.com/
- https://gallery.manypixels.co/
- links https://cssanimation.rocks/animating-links/
- tooltips on hover https://kazzkiq.github.io/balloon.css/
- Accessible Styled Forms https://github.com/scottaohara/a11y_styled_form_controls
- WTF Forms: Nicer Forms eg Radio Buttons with pure CSS https://github.com/mdo/wtf-forms
- Output-inspired form: https://twitter.com/steveschoger/status/1171429842442522625
- Perspective stairstep text effects https://codepen.io/jamc92/details/KaMLvY (in action: http://tennentbrown.co.nz)
- Duotone blend modes: https://jmperezperez.com/duotone-using-css-blend-modes/
- Decovar Font with Text shadows: https://codepen.io/mandymichael/details/dJZQaz (and other Variable Fonts by Mandy)
- Drop shadows:
box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5); - Expanding Search buton and text from Ana Tudor mentioned here
- XKCD chart https://timqian.com/chart.xkcd/
- Image editing/Export to SVG/Object Removal/Photoshop - Photopea
- Netflix slide-in menu - Codepen
- Peek Href on Links - 2min video
- Trianglify http://qrohlf.com/trianglify/
- generative artistry https://generativeartistry.com/
- Canvas Cards https://canvas-cards.glitch.me/
- Open Processing https://www.openprocessing.org/
- https://react-smooth-range-input.now.sh/
- React Physics Dragger https://react-physics-dragger-demo.netlify.com/
- React-Designer: Easy to configure, lightweight, editable vector graphics in your react components.
<Foldable>from Folding the DOM- Spinners
- https://github.com/thedevelobear/react-rewards
- React Confetti https://alampros.github.io/react-confetti/
- React DOM Confetti https://daniel-lundin.github.io/react-dom-confetti/
- https://github.com/miukimiu/react-kawaii
- https://react-icons.netlify.com/#/icons/fa (typically fontawesome)