CSS генератор ефектів онлайн

Властивість CSS дозволяє встановлювати стилі до елементів HTML. Існує кілька типів властивостей для стилізації елементів HTML. Ось цей інструмент генератора коду призначений для створення вихідного коду для найбільш підходящогоого стилю CSS. Ви можете стилізувати колір, фон, ефекти для різних елементів CSS.

CSS генератор коду для вибраного елементу з можливістю перегляду

• Border 
• Border Radius 
• Box Shadow 
• Background 
• Text-Shadow 
• Gradient 
• Matrix Transform 
• Transition 
• CSS Animation 
• Image Filter 

BorderBorder RadiusBox ShadowBackgroundText-ShadowGradientMatrix TransformTransitionCSS AnimationImage Filter

       

Вікно результату

Code

border:20px solid #2eb9ce;

-----other style-----

border-width:20px;

border-style:solid;

border-color:#2eb9ce;

Border

Border Width px

Border Stylesoliddotteddasheddoublehiddenridgeinsetoutset

Border Color

 

Individual

Border Top

pxsoliddotteddasheddoublehiddenridgeinsetoutset

Ў

Border Right

pxsoliddotteddasheddoublehiddenridgeinsetoutset

Ў

Border Bottom

pxsoliddotteddasheddoublehiddenridgeinsetoutset

Ў

Border Left

pxsoliddotteddasheddoublehiddenridgeinsetoutset

Ў

Border Radius

All Radius px

 

Top Left px

Top Right px

Bottom Right px

Bottom Left px

Box Shadow

Shadow TypeOutsetInset

XY position

Shadow Fade

Shadow Spread

Shadow Color

 

Add more [+]

Background

Background Color

Background Image

Background Repeatno-repeatrepeat-xrepeat-yrepeat

Background Position

keyword  
% (percent)  
px (pixel)

horizontal - xleftcenterright

vertical - ytopcenterbottom

horizontal - x%

vertical - y%

horizontal - xpx

vertical - ypx

Text Shadow

Text

Text Color

Shadow Color

XY Position

Shadow blur

 

Add more [+]

Gradient

Cторінка градієнтів

Orientationlinearradialellipticalrepeat linearrepeat radialrepeat elliptical

Sizefarthest-sidefarthest-corner

Positiontop lefttop centertop rightleft centercenter centerright centerbottom leftbottom centerbottom rightpx px% %

px px

% %

Degree

Start Color

End Color

Add Stopper [+]

Transform

matrix (a,b,c,d,x,y)

100
010
001

 

Individual Transform

scale

rotate

skew

translate XY 0

Transition

Додати властивість [+]

add | cancel

Image Filter

Greyscale

Blur

Sepia

Saturate

Opacity

Brightness

Contrast

Hue-rotate

Invert

Animation

Play/Stop 

Select Animationcolorjumpbounce inbounce outflipflip in Xflip in Yflip Outrotateappearnewspaperzoom-in-outelasticalertshake

	functionlineareaseease-inease-in-outease-outcubic-bazier x1y1 x2y2
speed duration(sec) start delay iteration count1 time2 timesinfinite

CSS Border style property is to create boder color, size and shape type around HTML element.

Розміщено на UACMS