one for all

CSS box shadow generator

Stapel een paar zachte lagen voor schaduwen die er natuurlijk uitzien, en kopieer dan de CSS.

Verzegeld op dit apparaat

Werkt in je browser. Er wordt niets geüpload.

Verzegeld

Voorbeeld

Schaduwlagen

Presets

CSS-code


            
        

        

            
        

    



        

        
    






    

        
Zo werkt het

        
    
                        
  1. 
                
    Begin met een preset
    
                
    Kies een zachte, gelaagde, zwevende, scherpe of binnenschaduw als startpunt.
    
            
    2. 
                        
  2. 
                
    Pas de lagen aan
    
                
    Stel per laag de offset, vervaging, spreiding, kleur en dekking in, en voeg lagen toe of verwijder ze. Het voorbeeld wordt meteen bijgewerkt.
    
            
    3. 
                        
  3. 
                
    Kopieer de CSS
    
                
    Kopieer de box-shadow-declaratie en plak hem in je stylesheet.
    
            
    4. 
                    

    


    

        
Veelgestelde vragen

        

                        

                Wat doen vervaging en spreiding?
                
Vervaging (blur) maakt de rand van de schaduw zachter: hoe hoger de waarde, hoe diffuser hij wordt. Spreiding (spread) maakt de schaduw groter of kleiner voordat de vervaging wordt toegepast. Een negatieve spreiding met veel vervaging geeft het zachte, zwevende effect dat je vaak in moderne interfaces ziet.

            

                        

                Waarom meerdere schaduwlagen gebruiken?
                
Echte schaduwen hebben een donkere, strakke kern vlak bij het object en een zachte, brede gloed verder weg. Door een kleine scherpe laag te combineren met een of twee grotere, lichtere lagen boots je dat na, en dat ziet er veel natuurlijker uit dan één enkele schaduw.

            

                        

                Wat is een inset-schaduw?
                
Een inset-schaduw wordt binnen het element getekend in plaats van erbuiten. Daardoor lijkt een oppervlak ingedrukt, wat goed werkt voor invoervelden of ingedrukte knoppen.

            

                        

                Werkt de schaduw in alle browsers?
                
Ja. box-shadow, meerdere lagen en de rgb()-kleurnotatie in de code worden door alle huidige browsers ondersteund.

            

                        

                Maakt een box shadow mijn pagina trager?
                
Statische schaduwen zijn licht om te tekenen. Heel grote vervagingen op veel elementen, of het animeren van de schaduw zelf, kosten meer. Wil je een schaduw soepel animeren? Laat dan de dekking van een pseudo-element met de schaduw in- en uitfaden.

            

                    

    


    

        
                
                
    





    

    
    
    

        

            One For All op je computer installeren
            
        

        
    

    
One For All opent dan in een eigen venster, net als een app, rechtstreeks vanaf je bureaublad of startscherm. Je hoeft niets te downloaden uit een appstore, en je bestanden blijven nog altijd op je apparaat.

        
        
        
    
                
  1. Klik op het installatiepictogram rechts in de adresbalk, of open het browsermenu (⋮).
    2. 
                
  2. Kies “One For All installeren” of “Pagina installeren als app”: er komt een snelkoppeling op je bureaublad en bij je apps.
    3. 
            

        
        
        

        
    


        
    

        
De engine van deze tool downloaden?

        
    

    
Deze tool werkt volledig in je browser. Daarvoor moet hij de onderdelen hieronder eenmalig downloaden van One For All. Daarna blijven ze bewaard op dit apparaat, zodat de tool de volgende keer meteen start.

    
    
    
    
Je bestanden worden nooit ergens naartoe gestuurd.