Генератор на градиенти

Направете линеарен, радијален или коничен градиент, додајте точки на боја, поставете насока и копирајте го CSS-кодот со еден клик.

Тип на градиент
Точки на боја
CSS
Прилагодете ги точките и насоката за да го обликувате градиентот.

Секој градиент се исцртува директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

ЧПП

Која е разликата меѓу линеарни, радијални и конични градиенти?

Линеарен градиент ги прелева боите долж права линија што ја насочувате со агол. Радијален градиент ги шири нанадвор од центарот во круг или елипса. Коничен градиент ги врти околу центарот како тркало на бои.

Што се тоа точки на боја (color stops)?

Секоја точка на боја е боја фиксирана на одредена позиција долж градиентот — 0% на почетокот, 100% на крајот. Поместете ја точката за да го смените местото каде што нејзината боја го достигнува максимумот, или додајте повеќе точки за побогато прелевање. Можете да користите до осум точки.

Како да ја контролирам насоката?

За линеарен или коничен градиент, лизгачот за агол ја одредува насоката — 0° покажува нагоре, 90° покажува десно. Радијалниот градиент нема агол; наместо тоа, изберете кружен или елиптичен облик за да промените како се шири.

CSS Cubic Bezier ГенераторПовлечете ги двете рачки за да обликувате крива на транзиција, следете го движењето на точката во споредба со рамномерното и копирајте ја вредноста cubic-bezier().Генератор на Box ShadowПовлечете ги лизгачите за да обликувате box-shadow, наредете слоеви за длабочина и копирајте го готовиот CSS веднаш.Генератор на Border RadiusЗаоблете го секој агол со лизгачи, обликувајте органски форми со елиптичниот режим и копирајте го CSS-кодот веднаш.Генератор на FlexboxПоставете flex контејнер и неговите елементи со визуелни контроли, следете ги промените во живо и копирајте го CSS-кодот со еден клик.CSS Grid ГенераторПоставете ги Вашите колони и редови, повлечете преку ќелиите за да поставите елементи и копирајте го CSS-кодот за мрежата со соодветниот HTML со еден клик.Калкулатор за CSS clamp()Внесете големина за мали и големи екрани и добијте флуидна clamp() вредност што се скалира непречено помеѓу нив — за големини на фонтови, внатрешни и надворешни маргини или празнини.Конвертор на боиПретворајте бои меѓу HEX, RGB, HSL, HSV, CMYK и LAB — уредете кое било поле, а останатите се ажурираат во од.CSS разубавувач и минимизаторВовлечете го неуредниот CSS за полесно читање или минимизирајте го за објавување — со безбеден режим кој никогаш не го менува редоследот на вашите правила.Проверка на контрастВнесете боја на текст и позадина за да го видите WCAG соодносот на контраст и кои AA и AAA нивоа се задоволени.