CSS-gradientgenerator
Skapa linjära och radiella CSS-gradienter med flera färgstopp, liveförhandsgranskning och kopierbar CSS för background.
🔒 Körs helt i din webbläsare — ingenting laddas uppBygg CSS-gradienter visuellt
CSS-gradienter är kraftfulla eftersom de skalas perfekt, laddas direkt och inte kräver bildfiler. Med en enda deklaration kan de skapa hero-bakgrunder, knappaccenter, kort, överlägg, diagramfyllningar och diskreta dekorativa ytor. Den här gradientgeneratorn ger dig en liveförhandsgranskning medan du justerar färger, stoppositioner och riktning, och skapar sedan en färdig background:-regel att kopiera till din stilmall.
Verktyget stöder både linjära och radiella gradienter. Linjära gradienter löper över ett element i en riktning som styrs av en vinkel, vilket är användbart för banners, knappar och diagonala ljuseffekter. Radiella gradienter strålar ut från mitten och fungerar bra för strålkastare, glöd, mjuka bakgrunder och fokusområden. Eftersom förhandsgranskningen använder vanlig webbläsar-CSS är det du ser samma typ av gradient som dina besökare får se.
Arbeta med färgstopp
Ett färgstopp talar om för webbläsaren vilken färg som ska synas vid en viss procentandel av gradienten. Två stopp skapar en enkel övertoning från en färg till en annan, medan tre eller fler stopp kan ge en högdager, gå via en varumärkesfärg eller hålla en färg över en större del av elementet. Stopp som placeras närmare varandra ger en skarpare övergång; större avstånd ger en mjukare blandning. Använd extra stopp med omsorg, eftersom en gradient med för många orelaterade nyanser kan bli distraherande.
Använda gradienter i verkliga gränssnitt
Gradienter är lättast att underhålla när de stödjer innehållet i stället för att konkurrera med det. I textrika områden bör du behålla hög kontrast och överväga ett halvtransparent överlägg mellan gradienten och texten. Testa hover- och fokuslägen för knappar och dekorativa kort så att gradienten inte döljer konturer eller försämrar läsbarheten. Kopiera den genererade CSS:en till ditt projekt och justera sedan avstånd, hörnradie och förgrundsfärger i sitt sammanhang. Den bästa gradienten är den som förstärker hierarkin och håller gränssnittet tydligt.
Hur man använder
- Välj gradienttypVälj linjär eller radiell och ange en vinkel för linjära gradienter.
- Redigera färgstoppVälj färger, flytta deras procentpositioner och lägg till fler stopp vid behov.
- Kopiera CSSAnvänd den genererade background-deklarationen i din stilmall.