Componentes

gradient

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

36 de 38

Carregando o índice completo de busca.

Aurora veil

1526Aurora veilFundosUm fundo sem margens de três faixas de luz flutuantes que se somam onde se cruzam, sobre um fundo escuro, com uma camada de legenda que permanece legível.

Aurora curtain

1666Aurora curtainFundosUma suave cortina de luz pendurada na borda superior, sua bainha inferior subindo e descendo em uma lenta onda de ruído enquanto sua cor muda ao longo da largura.

Drifting gradient wash

1687Drifting gradient washFundosUm painel gradiente de dois tons superdimensionado além de sua moldura e movido lentamente para frente e para trás, de modo que o limite da cor flutua pela superfície para sempre.

Drifting Light Beams

1688Drifting Light BeamsFundosAltas barras inclinadas de luz sobem em diferentes velocidades e se misturam em uma névoa que se move lentamente.

Gradient slat spotlight

1700Gradient slat spotlightFundosAs ripas verticais escondem um gradiente de cor até que um holofote suave rastreie o ponteiro sobre elas e ilumine cada ripa que toca.

Grain wash

1701Grain washFundosDois conjuntos de cores se misturam no quadro, enquanto uma deformação lenta mantém a borda em movimento, tudo sob uma granulação pesada do filme.

Light column beam

1716Light column beamFundosUma única coluna de luz fica em uma moldura escura, respirando em largura enquanto sua textura interna rola para cima através de uma gradação de duas cores.

Pointer angle sweep

1732Pointer angle sweepFundosUm painel iluminado por uma varredura cônica cuja origem fica sob o ponteiro e cuja borda brilhante aponta para ele, facilitando um giro lento e inativo quando o ponteiro sai.

Pointer ripple mesh

1734Pointer ripple meshFundosUma placa colorida é amostrada através de uma malha grosseira cujas células lembram onde o ponteiro esteve, portanto, arrastar mancha a imagem e a mancha relaxa de volta.

Shifting gradient pill

1745Shifting gradient pillBotõesUm botão cápsula pintado com uma rampa diagonal grande que desliza pela face quando acionado, enquanto dois brilhos nos cantos alternam entre um tom claro e um tom profundo do mesmo tom.

Sliding Pin Swap

1747Sliding Pin SwapBotõesUm botão em rampa cujo glifo de alfinete desliza de um lado para o outro enquanto a palavra restante desaparece e uma resposta desaparece atrás dela.

Smoke veil drift

1748Smoke veil driftFundosFolhas largas de neblina colorida atravessam um campo negro em ângulo, tornando-se mais finas e mais espessas à medida que passam umas pelas outras.

Color blend compare

1766Color blend compareAnimaçãoDuas amostras circulam entre o mesmo par de cores, uma misturada em valores brutos de canal e outra em luz linear, mostrando a queda causada por uma transição simples.

Glow halo button

1828Glow halo buttonBotõesUm botão de pílula com uma duplicata de si mesmo desfocado atrás dele, de modo que pairando floresce um halo de cor suave enquanto o preenchimento flutua lentamente.

Drifting Gradient Button

1851Drifting Gradient ButtonBotõesUm botão cujo preenchimento diagonal de dois tons é superdimensionado e nunca para de deslizar, rodando mais rápido ao passar o mouse e apertando ao clicar.

Gradient Area Chart

1860Gradient Area ChartGráficosDuas séries mensais empilhadas desenhadas como áreas suaves cujos preenchimentos desaparecem de uma tonalidade forte na borda superior até quase transparente na linha de base.

Gradient swap button

1862Gradient swap buttonBotõesUm botão arredondado cujo sombreamento diagonal alterna seus dois pontos ao passar o mouse, de modo que o canto claro percorre toda a face.

Sheen sweep card

1886Sheen sweep cardCartõesUm cartão com uma faixa de luz estacionada em um canto que percorre o rosto ao pairar e desliza para trás no momento em que o ponteiro sai.

Stacked blur fade

1891Stacked blur fadeRolagemUma borda do painel de rolagem que se dissolve na cor do painel através de vários desfoques de fundo empilhados em vez de uma faixa de desfoque plana.

Brightening gradient button

1926Brightening gradient buttonBotõesUm chip profundo de dois tons cuja lavagem vertical sobe para um par muito mais brilhante da mesma família ao pairar, com um destaque de vidro fixo ao longo de sua borda superior.

Flow Area Chart

1961Flow Area ChartGráficosUm gráfico de área de série temporal com preenchimento gradiente que se desenha durante o carregamento e mostra uma cruz com uma dica de ferramenta de valor ao passar o mouse.

Flowing gradient headline

1962Flowing gradient headlineEfeitos de textoUm título cujas letras são preenchidas por um gradiente móvel de dois tons, de modo que uma faixa brilhante flutua indefinidamente pelas palavras, com um toque suave opcional atrás.

Gradient shift text

1970Gradient shift textEfeitos de textoUma pílula arredondada cujo texto é preenchido com um gradiente de duas cores que percorre continuamente as letras lateralmente.

Gradient sweep heading

1971Gradient sweep headingEfeitos de textoUm título grande cujo preenchimento é uma faixa gradiente móvel que se move continuamente de uma borda a outra, dando ao texto um brilho brilhante e em constante mudança.

Charge Up Action Button

2314Charge Up Action ButtonBotõesUma pílula de carvão que se ilumina em uma tonalidade gradiente saturada ao pairar, levantando-se da superfície enquanto sua marca gira e brilha.

Speckled gradient button

2434Speckled gradient buttonBotõesUma face gradiente de dois pontos sobreposta com ruído fractal gerado em uma mistura suave, para que a cor seja lida como impressa em material bruto.

Gradient tilt pill

2474Gradient tilt pillBotõesUma pílula totalmente arredondada cujo preenchimento gradiente de dois tons muda seu ângulo ao pairar e fica mais escuro em direção à sombra quando pressionado.

Panning gradient button

2483Panning gradient buttonBotõesUma tecla abaulada cujo gradiente diagonal superdimensionado se estende pela face ao pairar, varrendo uma faixa mais clara de um canto ao outro.

Settling shadow button

2592Settling shadow buttonBotõesUma pílula gradiente quente que flutua acima de uma grande sombra colorida e paira enquanto a sombra desaparece.

Rim to fill gradient button

2635Rim to fill gradient buttonBotõesUm botão escuro mostra apenas uma borda fina de gradiente em repouso; pairar derruba o painel interno para que o gradiente inunde todo o rosto e pressionar o comprime para baixo.

Frame draw button

2646Frame draw buttonBotõesUm botão preenchido que drena seu preenchimento ao passar o mouse enquanto quatro barras finas saem de cantos opostos para desenhar um quadro completo e, em seguida, tudo retorna ao sair.

Overhead light pill

2650Overhead light pillBotõesUm botão de pílula escuro iluminado por um feixe suave de luz no teto, escurecendo como um todo ao pairar e iluminando seu anel externo grosso no foco.

Flat to flow button

2661Flat to flow buttonBotõesUm botão plano e sólido que muda para uma ampla faixa de dois tons que rola indefinidamente em sua face enquanto você passa o mouse ou está focado.

Amber upload pill

2707Amber upload pillBotõesUma pílula de upload gradiente quente com uma borda brilhante que amplia seu tom colorido e ilumina o rótulo por trás ao passar o mouse.

Flowing gradient text

2814Flowing gradient textEfeitos de textoUm gradiente multicolorido percorre continuamente o preenchimento de um título, opcionalmente emoldurado por uma borda gradiente correspondente.

Sweeping shine text

2822Sweeping shine textEfeitos de textoTexto preenchido com um gradiente suave e uma faixa diagonal brilhante que se move para frente e para trás como um brilho de luz e pode congelar no lugar enquanto você passa o mouse.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Amber upload pill
Uma pílula de upload gradiente quente com uma borda brilhante que amplia seu tom colorido e ilumina o rótulo por trás ao passar o mouse.
Aurora curtain
Uma suave cortina de luz pendurada na borda superior, sua bainha inferior subindo e descendo em uma lenta onda de ruído enquanto sua cor muda ao longo da largura.
Aurora veil
Um fundo sem margens de três faixas de luz flutuantes que se somam onde se cruzam, sobre um fundo escuro, com uma camada de legenda que permanece legível.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)