CSS mainīgo ģenerators

Rediģējiet krāsu, atstarpju, tipogrāfijas un apaļinājuma rādiusa tokenus. Iegūstiet gatavu :root CSS bloku.

--color-:

CSS Output

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #8b5cf6;
  --color-accent: #f59e0b;
  --color-background: #ffffff;
  --color-surface: #f4f4f5;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-border: #e4e4e7;
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-family-sans: Inter, system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

Buy me a coffee

Kas ir CSS pielāgotās īpašības?

CSS pielāgotās īpašības tiek definētas ar -- prefiksu :root blokā un atsauktas jebkurā vietā lapā ar var(--nosaukums).

Saistītie rīki

CSS tīkla ģenerātors

Vizuāli veido CSS tīkla izkārtojumus. Konfigurē kolonnas, rindas, atstarpus un kopē ģenerēto CSS.

CSS apmales rādiusa ģenerātors

Vizuāli ģenerē border-radius CSS ar neatkarīgiem stūru vadīklām un tiešraides priekšskatījumu.

CSS teksta ēnas ģenerātors

Izveido slāņainus CSS teksta ēnu efektus ar tiešraides priekšskatījumu un viena klikšķa kopēšanu.

CSS filtra ģenerātors

Ģenerē CSS filtra efektus — izplūšanu, spilgtumu, kontrastu, krāsu rotāciju, piesātinājumu, sepiju un vairāk — ar attēlu priekšskatījumu.

CSS clip-path ģenerātors

Interaktīvi ģenerē CSS clip-path formas — poligonus, apļus un elipses — ar tiešraides priekšskatījumu. Velc vadīklas.

CSS animāciju ģenerātors

Vizuāli veido CSS @keyframe animācijas ar laika, atslābuma, aizkaves un atkārtošanās vadīklām.

CSS Flexbox ģenerātors

Vizuāls flexbox spēļu laukums — konfigurē flex-direction, flex-wrap, justify-content, align-items un elementu rekvizītus.

CSS lodziņa ēnas ģenerātors

Vizuāli veido CSS lodziņa ēnas ar slaidēm. Vairāki ēnu slāņi, izplūšana, izplatība, krāsa un necaurredzamība.

CSS gradienta ģenerātors

Vizuāli veido skaistus CSS lineāros un radiālos gradientus. Pielāgo krāsas, pieturas un leņķi — kopē gatavo CSS.

CSS gradienta teksta ģenerātors

Izveido gradienta teksta efektus tiešsaistē. Izvēlas 2–4 krāsas, virzienu un kopē gatavo CSS background-clip kodu.