Gerador de Border Radius Criativo
Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
O que significa a sintaxe de 8 valores do border-radius?
Na sintaxe border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, os valores antes da barra são os raios horizontais (superior esquerda, superior direita, inferior direita, inferior esquerda) e os que vêm depois são os raios verticais. Usar valores diferentes em cada direção é o que cria as formas blob orgânicas.
Como uso o CSS gerado?
Copie a linha do border-radius e cole em qualquer regra CSS do elemento que deseja moldar, por exemplo .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Funciona em CSS puro, Sass, valores arbitrários do Tailwind e estilos inline.
Onde as formas blob são usadas?
Formas blob são populares em ilustrações de destaque, avatares, fotos de perfil, cartões de recursos, botões e fundos decorativos no design moderno de sites e aplicativos.
Cantos arredondados funcionam em todos os navegadores?
Sim. O border-radius é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e navegadores móveis, sem necessidade de prefixos.
Posso animar a forma blob?
Sim. O border-radius é uma propriedade animável, então uma transição CSS permite morphing suave entre formas, por exemplo .blob { transition: border-radius .8s ease; }.
Qual é a diferença entre a sintaxe de 4 e de 8 valores?
A forma de 4 valores define o mesmo raio horizontal e vertical para cada canto, suficiente para pílulas ou círculos. A de 8 valores separa os raios horizontais e verticais, o que permite formas assimétricas e orgânicas.
Como criar um círculo perfeito?
Defina os oito valores como 50% em um elemento quadrado, ou simplesmente use border-radius: 50%. Você também pode partir de um predefinido próximo ao círculo e ajustar.
Meus dados são enviados para algum servidor?
Não. O gerador funciona inteiramente no seu navegador com CSS e JavaScript puros. Nada do que você arrasta, digita ou copia é enviado a servidores.
Posso usar em elementos não quadrados?
Sim, mas os raios percentuais são relativos às dimensões do elemento, então um retângulo terá cantos elípticos e um visual diferente da pré-visualização quadrada. Use os valores gerados como ponto de partida e ajuste.
Como usar Gerador de Border Radius Criativo
O border-radius de oito valores produz formas orgânicas de blob com cantos elípticos que um retângulo arredondado comum não alcança. Esculpa a forma com as alças e copie o CSS pronto — tudo é renderizado ao vivo no seu navegador.
- Arraste qualquer uma das oito alças posicionadas nas bordas da forma — as das bordas superior e inferior controlam os raios horizontais, as das laterais os verticais.
- Clique em um dos seis quadrados de formas predefinidas para partir de um blob já desenhado e refine os valores nos campos numéricos de Raios horizontais e Raios verticais (um por canto, 0–100%).
- Pressione Aleatório para gerar uma nova forma orgânica num clique, ou Redefinir para voltar à forma e às cores padrão.
- Escolha uma Cor da forma e um Fundo para pré-visualizar o blob sobre a sua paleta-alvo — ambos atualizam na hora.
- Pressione Copiar CSS para levar a declaração border-radius exibida em tempo real na barra inferior e cole em qualquer elemento.
Aplique o código num elemento quadrado com overflow: hidden para o clássico visual de blob; porcentagens mantêm a curva fluida em qualquer tamanho, e a barra no código separa os raios horizontais dos verticais.
Ferramentas relacionadas
- Gerador de Border Radius CSS Gerador visual de border-radius CSS. Ajuste cada canto independentemente com pré-visualização em tempo real e copie o código CSS instantaneamente.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador de Box Shadow CSS Gerador online gratuito de box-shadow CSS. Crie sombras bonitas visualmente com deslocamento, desfoque, expansão, cor e inserção ajustáveis. Visualização ao vivo e cópia instantânea.
- Gerador de Paleta de Cores Crie paletas de cores bonitas e harmoniosas instantaneamente com nosso gerador online gratuito. Suporta modos monocromático, análogo, complementar, triádico, split-complementar e tetradício. Ajuste cores com controles HSL, bloqueie favoritos e exporte como CSS, Tailwind, JSON ou SVG. 100% baseado em navegador, seus dados nunca saem do seu dispositivo.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
- Gerador de Clip Path CSS Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.