DEV Community

Cover image for ๐Ÿญ๐Ÿฌ ๐—ช๐—ฒ๐—ฏ ๐—”๐—ฝ๐—ฝ๐˜€ ๐˜๐—ผ ๐—•๐—ผ๐—ผ๐˜€๐˜ ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—ฃ๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐˜ƒ๐—ถ๐˜๐˜†
Fatemeh Paghar
Fatemeh Paghar

Posted on

๐Ÿญ๐Ÿฌ ๐—ช๐—ฒ๐—ฏ ๐—”๐—ฝ๐—ฝ๐˜€ ๐˜๐—ผ ๐—•๐—ผ๐—ผ๐˜€๐˜ ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—ฃ๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐˜ƒ๐—ถ๐˜๐˜†

๐Ÿ. ๐†๐ซ๐š๐›๐ข๐ž๐ง๐ญ

Seriously well executed One Pager called โ€˜Grabientโ€™ providing colorful gradient CSS code for your next project. The Singe Page site features impressive UI elements to copy gradients, add colors, increase color rations and even change the gradient angle.

https://www.grabient.com/?ref=producthunt

Image description

๐Ÿ. ๐๐จ๐ฑ ๐’๐ก๐š๐๐จ๐ฐ๐ฌ

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

https://box-shadow.dev/

Image description

๐Ÿ‘. ๐†๐ซ๐ข๐ ๐†๐ž๐ง๐ž๐ซ๐š๐ญ๐จ๐ซ

Generate basic CSS Grid code to make dynamic Layouts.

https://cssgrid-generator.netlify.app/

Image description

๐Ÿ’. ๐Š๐ž๐ฒ๐Ÿ๐ซ๐š๐ฆ๐ž๐ฌ

Create CSS keyframe animations with a visual timeline editor.

https://keyframes.app/

Image description

๐Ÿ“. ๐’๐•๐† ๐๐š๐œ๐ค๐ ๐ซ๐จ๐ฎ๐ง๐๐ฌ

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

https://www.svgbackgrounds.com/

Image description

๐Ÿ”. ๐”๐ง๐๐ซ๐š๐ฐ

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

https://undraw.co/illustrations

Image description

๐Ÿ•. ๐’๐ก๐š๐ฉ๐ž๐ซ

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

https://hihayk.github.io/shaper/

Image description

๐Ÿ–. ๐…๐จ๐ง๐ญ๐ฃ๐จ๐ฒ

Font pairing mode is simple. Generate font combinations with deep learning.

https://fontjoy.com/

Image description

๐Ÿ—. ๐‡๐ž๐š๐๐ฅ๐ž๐ฌ๐ฌ ๐”๐ˆ

Completely unstyled, fully accessible UI components.

https://headlessui.com/

Image description

๐Ÿ๐ŸŽ. ๐’๐ข๐ณ๐ณ๐ฒ

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

https://sizzy.co/

Image description

Top comments (10)

Collapse
ย 
kilianvalkhof profile image
Kilian Valkhof โ€ข

You should really check out Polypane, it's a browser that helps developers with responsive design, accessibility and code quality. I'm happy to give you a demo!

Collapse
ย 
fpaghar profile image
Fatemeh Paghar โ€ข

I checked your product.

Collapse
ย 
kilianvalkhof profile image
Kilian Valkhof โ€ข

Thanks for checking it out, I hope you liked it!

Collapse
ย 
raycaballero profile image
Ray Caballero โ€ข

Thanks!

Collapse
ย 
juanfrank77 profile image
Juan F Gonzalez โ€ข

All great recommendations. Especially #8.

Collapse
ย 
npithia profile image
Nishant Pithia โ€ข

Wow! This is fantastic

Collapse
ย 
ahmadadibzad profile image
Ahmad Adibzad โ€ข

I needed a tool for creating advanced animations. Keyframes was useful for me.

Collapse
ย 
fpaghar profile image
Fatemeh Paghar โ€ข

It is perfect

Collapse
ย 
rumendimov profile image
Rumen Dimov โ€ข

Excellent suggestions, thanks for the content

Collapse
ย 
fpaghar profile image
Fatemeh Paghar โ€ข

your welcome