Generator cieni CSS: podgląd na żywo, kopiuj kod
Ustaw przesunięcie, rozmycie, rozrost, kolor i krycie, aby stworzyć wartość CSS box-shadow, zobacz podgląd na żywo i skopiuj kod.
Generator cieni CSS
Ten generator tworzy jedną wartość CSS box-shadow na podstawie sześciu ustawień: przesunięcia poziomego, przesunięcia pionowego, promienia rozmycia, promienia rozrostu, koloru cienia z własnym suwakiem krycia oraz przełącznika inset. Dwa dodatkowe selektory kolorów ustawiają pole podglądu i jego tło, dzięki czemu cień jest dobrze widoczny zarówno na jasnym, jak i ciemnym tle, a cztery gotowe ustawienia, soft, hard, glow i inset, wczytują gotową kombinację jednym kliknięciem. Każda zmiana natychmiast aktualizuje linię box-shadow pod podglądem, gotową do skopiowania.
Jak powstaje wartość box-shadow
CSS zapisuje cień jako stałą kolejność liczb: przesunięcie poziome, przesunięcie pionowe, promień rozmycia, promień rozrostu, a potem kolor; aby narysować cień wewnątrz krawędzi pola zamiast za nią, na początku dodaje się słowo inset. Przesunięcie poziome i pionowe przesuwa cień w bok lub w pionie, a oba przyjmują wartości ujemne aż do -50px, więc cień może paść po lewej stronie pola lub znaleźć się nad nim. Promień rozmycia, od 0 do 100px, zmiękcza krawędź cienia, a promień rozrostu, od -50 do 50px, powiększa lub zmniejsza cień niezależnie od rozmiaru samego pola. Wartość szesnastkowa z selektora koloru rozkłada się na składowe czerwoną, zieloną i niebieską, a suwak krycia, od 0 do 1, staje się czwartą wartością wewnątrz rgba(); przy 0 cień jest całkowicie przezroczysty, przy 1 odpowiada dokładnie wybranemu kolorowi.
Rozwiązany przykład
Przy przesunięciu poziomym 0px, pionowym 10px, rozmyciu 22px i rozroście -6px, wraz z kolorem cienia #9333ea i kryciem 0,4, wynikiem jest box-shadow: 0px 10px 22px -6px rgba(147, 51, 234, 0.4). Kod szesnastkowy #9333ea rozkłada się na czerwony 147, zielony 51 i niebieski 234, a 0,4 z suwaka krycia trafia bezpośrednio jako czwarta wartość rgba(), bez dodatkowego przeliczania. Włączenie inset przy tych samych sześciu wartościach rysuje identyczny cień wewnątrz krawędzi pola zamiast za nią, co jest częstym efektem przy wciśniętych przyciskach lub wklęsłych polach wprowadzania.
Kod CSS gotowy do skopiowania
.karta {
box-shadow: 0px 10px 22px -6px rgba(147, 51, 234, 0.4);
}