Oceaan CSS-gradiënt — Kant-en-klare code
Bouw CSS-gradiënten visueel op: lineair, radiaal of conisch type, hoekschuifregelaar en tot zes kleurstops met een live breed voorbeeldvenster en kopieerbare code.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de gradiëntgenerator met een kant-en-klare oceaanoverloop ingeladen: diep teal #2193b0 dat overvloeit in licht aqua #6dd5ed. Het brede voorbeeldvenster geeft het meteen weer en de achtergrond-CSS-regel is klaar om te kopiëren.
Blauw-teal gradiënten zijn de veiligste keuze in UI: ze stralen rust en vertrouwen uit, houden witte en donkere tekst aan beide uiteinden leesbaar en passen net zo goed bij dashboards, SaaS-landingspagina's als banners. Beide stops delen dezelfde koele tintfamilie, dus de overgang blijft over de hele lengte schoon.
Zet hem zo live of pas aan: maak de hoek steiler voor een verticaal diepte-effect, of voeg een bijna-witte stop op 100% toe voor een horiontale gloed. Heb je bijpassende egale kleuren voor knoppen en accenten nodig, dan bouwt de kleurenpaletgenerator op deze site een harmonie vanuit elke stop.