Top 10 sites / extensions you should use if you are a Frontend Developer 😎
Tags: webdev, html, css
Published: 2021-05-26 02:10:04


# [CssGradient](https://cssgradient.io/gradient-backgrounds/ "CssGradient") 
Here you will find gradients of all kinds so that your website is at another level from simple to complex gradients, in addition to all the css code
[![IMAGEN](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HJDVC54H2RGL3F4BDTAVWRFS "IMAGEN")](IMAGEN "IMAGEN")


# [Color Picker] (https://chrome.google.com/webstore/detail/color-picker/clkoagfbjkilljcajbbielofkeokbhma/related?hl=es "# Color Picker")🎈
Look for that color that you like from your favorite website

[![Imagen](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HJBTRRO2MVF3RMNX4LAVWSLA "Imagen")](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HJBTRRO2MVF3RMNX4LAVWSLA "Imagen")

# [ Glyphy](https://www.glyphy.io/?ref=blog.moeminmamdouh.com "# Glyphy")
Glyphy es una sencilla herramienta en línea que te permite copiar fácilmente caracteres y símbolos especiales (también conocidos como glifos) al portapapeles de tu dispositivo para que luego puedas pegarlos en cualquier documento o aplicación que desees.

[![Imagen](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HLQXTPZ5YWWOPRZFTLAVWTBW "Imagen")](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HLQXTPZ5YWWOPRZFTLAVWTBW "Imagen")

# [Haikei.app ](https://app.haikei.app/ "# Haikei.app ")
This is my favorite, you can generate patterns like: globs, waves, Blurry Gradients etc.
[![asd](https://raw.githubusercontent.com/cutioluis/images/main/3.PNG?token=AOR56HKMZHSUYME5LCK746TAVWVV2 "asd")](https://raw.githubusercontent.com/cutioluis/images/main/3.PNG?token=AOR56HKMZHSUYME5LCK746TAVWVV2 "asd")

# [Ray.so](https://ray.so/ "#Ray.so")
Transform your code to an impressive and very colorful card
[![g](https://raw.githubusercontent.com/cutioluis/images/main/2.PNG?token=AOR56HIG2KJX4TJSBDS3JILAVWVOQ "g")](https://raw.githubusercontent.com/cutioluis/images/main/2.PNG?token=AOR56HIG2KJX4TJSBDS3JILAVWVOQ "g")

# [IcoMoon](https://icomoon.io/ "IcoMoon")
Find all the icons for your website in svg, png and even imported css formats
[![img](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HL5RCR22FFVAT3JG2TAVWUWW "img")](https://raw.githubusercontent.com/cutioluis/images/main/Capture.PNG?token=AOR56HL5RCR22FFVAT3JG2TAVWUWW "img")


# [Neumorphism.io ](https://neumorphism.io/#e0e0e0 "Neumorphism.io ")
Create awesome shadows ready to implement in all your Css
[![](https://raw.githubusercontent.com/cutioluis/images/main/4.PNG?token=AOR56HPENEK7OKZJRTTVD6TAVWWZM)](https://raw.githubusercontent.com/cutioluis/images/main/4.PNG?token=AOR56HPENEK7OKZJRTTVD6TAVWWZM)

# [ANDI](https://www.ssa.gov/accessibility/andi/help/install.html "ANDI")
ANDI is like having an expert at your side, helping you ensure your website is meeting accessibility standards. Include ANDI in screenshots during your manual accessibility review. Use ANDI during development to help you build accessible websites.

Whether you're an accessibility expert or you're new to Section 508 compliance, ADA compliance, or WCAG standards, you should definitely check out ANDI.

# [Editor.md](https://pandao.github.io/editor.md/en.html "Editor.md")  🍳
Editor.md is a markdown Editor if you don't know much about md this tool will help you, it will be used to make descriptions of your GitHub file or make notes

# [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon "React Developer Tools")
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.