DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 12 Powerful Design Tools for Front-end Developers βœ¨πŸ’―
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

12 Powerful Design Tools for Front-end Developers βœ¨πŸ’―

An eye-catching design is an effective way to keep the visitors' attention. I've compiled some of the most useful tools that will help you to improve your design workflow.

With this collection, you will be able to make sketches for your designs, pick color palettes, create gradients, add shadows, make animations, include custom backgrounds, find proper illustrations, experiment with different layout systems and components, and much more.

Each tool will include a direct link, a description, and an image preview.


1. excalidraw

1662035541_1920x929.png

Virtual whiteboard for sketching hand-drawn diagrams.

2. mycolor-space

1662035590_1920x929.png

Find the perfect color palette by entering a color and generating results.

3. grabient

1662035624_1920x929.png

Awesome UI tool to generate linear web gradients.

4. box-shadows

1662035649_1920x929.png

A shadow generator with blur, transparency, position, and other parameters.

5. grid-generator

1662035671_1920x929.png

Generate basic CSS Grid code to make dynamic layouts.

6. keyframes

1662035697_1920x929.png

Create CSS @keyframe animations with a visual timeline editor.

7. svg-backgrounds

1662035726_1920x929.png

A collection of SVG backgrounds that can easily be used to set on your site.

8. undraw

1662035784_1455x776.png

Open-source illustrations for any idea you can imagine and create.

9. shaper

1662035806_1920x929.png

Interface styles shaper. Play with the typography, spacing, colors, and layers.

10. fontjoy

1662035844_1920x929.png

Font pairing made simple. Generate font combinations with deep learning.

11. headless-ui

1662035872_1920x929.png

Completely unstyled, fully accessible UI components.

12. sizzy

1662036013_1160x713.png

A dev-oriented browser, making responsive design a breeze.


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Top comments (6)

Collapse
 
rabiulhossen profile image
Rabiul Hossen

These are very helpful for me as a developer.
a lot of thanks

Collapse
 
madza profile image
Madza Author

Happy to hear you found them useful βœ¨πŸ‘πŸ’―

Collapse
 
spandyboss profile image
SpandyBoss

Nice list actually helpful. I'll surely try these.
Keep it up!

Collapse
 
madza profile image
Madza Author

Glad to hear you found it useful πŸ‘βœ¨πŸ’―

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

I always wanted some of the ones you have suggested here for my projects!! Thanks

Collapse
 
madza profile image
Madza Author

My pleasure and glad you liked them πŸ‘πŸ’―βœ¨

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›