Generátor přechodů CSS

Tento generátor přechodů CSS vytváří lineární a radiální přechody z barevných zastávek, které ovládáte, s živým náhledem a deklarací pozadí připravenou k vložení. Přetáhněte zarážky podél lišty, nastavte úhel nebo tvar a CSS se okamžitě aktualizuje.

Vše běží ve vašem prohlížeči z barev a nastavení, které si zvolíte, takže se nic nenahrává a výsledek můžete zkopírovat a použít offline.

Lineární přechod spojuje barvy podél přímky a úhel nastavuje jeho směr: 0 stupňů body nahoru, 90 stupňů body doprava, 180 stupňů dolů. Radiální přechod se mísí směrem ven od středu jako kruh nebo elipsa.

Obě jsou standardními hodnotami CSS, zapsané jako linear-gradient() a radial-gradient(), a obě používají stejný seznam barevných zarážek, takže přepnutím typu zůstanou vaše barvy zachovány a změní se pouze jejich šíření.

Každá zarážka barvy je barva umístěná na pozici od 0 % do 100 %. Přechod plynule přechází mezi sousedními zastávkami, takže poloha zastávky určuje, kde její barva vrcholí a jak rychle přechází do další.

Přidejte tolik zastávek, kolik potřebujete, abyste vytvořili vícebarevné přechody, přetažením je dolaďte prolnutí nebo kliknutím na pruh umístěte novou zarážku tam, kde ji chcete mít. Dvě zastávky jsou minimum, které spád potřebuje.

Zkopírujte vygenerovaný kód a vložte jej jako pozadí libovolného prvku, jako je sekce, karta nebo tlačítko. Moderní prohlížeče podporují lineární přechod a radiální přechod bez předpony dodavatele, takže hodnota funguje tak, jak je.

Protože přechod je pouze hodnota, můžete jej také použít kdekoli, kde se očekává obrázek na pozadí, navrstvit jej na plnou barvu jako záložní nebo znovu použít stejné zarážky v lineární a radiální verzi pro konzistentní vzhled.