🎨 Studio Toolkit Pro

Design Gráfico + Web Design — Paletas, Gradientes, Sombras, Tipografia, 📄 Formatos de Papel + ✨ Ferramenta de Linhas (Fios/Stroke)

🎨 Paleta Inteligente

HEX: #3b82f6

🌈 Gradiente CSS

Cor Inicial Cor Final Ângulo: 135°

background: linear-gradient(135deg, #ff9a9e, #fad0c4);

✨ Box Shadow

Offset X: 8px Offset Y: 8px Blur: 15px Spread: 0px Cor Sombra Inset

Preview

box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.4);

🔤 Mostruário Tipográfico

Família

Tamanho (px)18px

Peso

Cor Texto Fundo

ABCDEFG abcdefg 1234 — Design Gráfico

/* CSS da tipografia */

📄 Formatos de Papel

Clique num formato

✏️ Ferramenta de Linhas (Stroke / Fios) — Largura, Estilo, Pontas e Cantos

📏 Largura (px): 2px 🎨 Cor da Linha 〰️ Estilo do Traço

🔘 Estilo das Pontas (linecap): 📐 Estilo dos Cantos (linejoin): 🎯 Opacidade 100%

/* Estilos de linha (fios) */

💡 Dica: Use para definir bordas, outlines, ou traços em elementos gráficos. Preview com linha reta e curva.

📐 Escala Tipográfica Modular + Conversor px/rem

Base (html): 16pxRazão: 1.25

h1: 2.441rem | h2: 1.953rem

Conversor px ↔ rem (base)

0 rem

0 px

Ferramenta profissional para Designers Gráficos e Web Designers