⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador CSS Squircle – Quadrado Arredondado

Projete o raio da borda CSS visualmente: quatro controles deslizantes de canto independentes em px ou porcentagem, um atalho de link para todos os cantos para círculos e pílulas instantâneos, além de um modo de blob orgânico com formas aleatórias.

12px
12px
12px
12px
Processando... 0%

Resultado

Esta página abre o gerador de raio de borda com todos os quatro cantos vinculados em 30%, um arredondamento moderado que fica entre um quadrado agudo e um círculo completo. Não é um verdadeiro esquilo matemático (uma superelipse), mas é o mais próximo que uma única propriedade CSS pode chegar e é o valor que a maioria dos sistemas de design alcança quando desejam essa aparência.

O nome vem dos ícones de aplicativos quadrados arredondados popularizados pelo iOS: curva suficiente em cada canto para parecer suave e amigável, mas nunca tanto que a forma pareça redonda. Blocos de ícones, miniaturas de cartões e molduras de avatar modernas dependem de raios nessa mesma faixa aproximada exatamente por esse motivo.

Deslize o controle deslizante vinculado para cima para obter uma sensação mais suave e circular ou para baixo para obter uma sensação mais nítida e quadrada - a linha CSS é atualizada a cada alteração, pronta para ser copiada assim que a curva parecer adequada para seu ícone ou cartão.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Modo de cantos: controles deslizantes independentes de raio superior esquerdo, superior direito, inferior direito e inferior esquerdo, cada um comutável entre unidades px e percentuais.
  • Caixa de seleção Vincular todos os cantos que direciona todos os cantos de um controle deslizante, além de uma visualização em tabuleiro de xadrez em um fundo claro ou escuro para que os cantos cortados permaneçam visíveis.
  • Modo Blob com um botão Randomize que cria formas orgânicas de sintaxe de barra de oito valores, mostradas em tamanho grande e prontas para serem copiadas como CSS.

Principais benefícios

✓ Cada controle deslizante atualiza a visualização ao vivo e a linha CSS instantaneamente, para que você nunca precise adivinhar como realmente é 12px 40% 8px 24%.
✓ O atalho link-all-corners transforma um controle deslizante em um círculo, pílula ou esquilo perfeito sem tocar os outros três cantos com a mão.
✓ O modo Blob gera formas orgânicas e aleatórias com a sintaxe de barra CSS de oito valores – uma aparência que um único valor de raio de borda nunca pode produzir.

Casos de uso

  • • Disque os raios dos quatro cantos de um cartão de forma independente — arredondando apenas a parte superior de um painel suspenso ou apenas um lado de uma guia.
  • • Vincule todos os quatro cantos a um controle deslizante para criar um círculo perfeito, um botão de pílula em forma de estádio ou um esquilo estilo iOS em segundos.
  • • Mude para o modo blob e clique em Randomize até que uma forma orgânica caiba no espaço vazio atrás de uma imagem de herói ou avatar e, em seguida, copie o CSS.